Html CSS动画侧按钮标签

每行的右侧都有一个标记触发器。 其中一些标签可能包含消息。最初只有一个指示器图标 将显示，而消息将隐藏。（我把溢出的水抽出来 用于演示，但可能还有其他方法）当显示图标时 如果悬停，则整个标记将向左移动并显示 带按钮的消息

现在问题来了。首先，我不能在纯CSS中用可伸缩的消息长度设置标签的动画。其次，由于我对每行使用固定高度，因此无法为消息文本的垂直对齐设置正确的属性

---

这是我的尝试。

在本例中，我将卡片下方的弹出部分弹出到右侧。将右侧：-10更改为10，并将背景位置：更改为左上角，这些都会对您有所帮助。你可以玩玩它

将每一行保留为li，您就可以给您的li上课：

li {
text-align: -webkit-match-parent;
line-height: 20px;
}

.pop-over-part {
position: absolute;
right: -10px;
top: 6px;
height: 100%;
width: 10px;
display: inline-block;
background-image: url(/assets/icons/tab-x.png);
background-repeat: no-repeat;
background-position: top right;
cursor: pointer;
}

---

1。要将消息的左边缘与行的右边缘对齐，而不考虑消息长度：首先使用

右：50px

（因为您希望显示左图标），将消息绝对定位，然后应用

转换：translateX（100%）

：

2。要在悬停时设置消息动画：您需要在

控件上定义一个
转换
，然后在
悬停
上简单地定义
转换：translateX（0）
。另外，设置
right:0
，使消息的右边缘与行的右边缘齐平

.card-item .control {
  position: absolute;
  right: 50px;
  transform: translateX(100%);
  transition: all 0.3s;

  /* other styles... */
}

.card-item .control:hover {
  right: 0;
  transform: translateX(0);
}

3。要垂直对齐消息文本：由于消息的高度固定，请将消息文本的
行高设置为
行高，即
50px
，并且
垂直对齐：顶部
：

.card-item .control .message {
  /* remove this: margin-top: -8px; */
  line-height: 50px;
  vertical-align: top;
}

您好，您确定您的代码笔吗？@GCyrillus有什么问题吗？您所描述的内容应该相对容易通过
位置：绝对
和
溢出：隐藏
实现。但是，您组合的Codepen示例目前不起作用（图标没有显示，悬停时没有发生任何事情）。如果你能达到你在问题中所描述的要点，我相信我们中的一个人会帮助你的！
.card-item .control .message {
  /* remove this: margin-top: -8px; */
  line-height: 50px;
  vertical-align: top;
}