Jquery 在隐藏的div上添加可见内容

我想知道是否有办法在部分隐藏的div末尾添加内容

.wrapper{
溢出：隐藏；
宽度：200px；
高度：30px；
边缘顶部：10px；
}
.幻灯片{
位置：绝对位置；
左：-180px；
宽度：200px；
高度：30px；
过渡：1s；
文本对齐：居中；
}
.包装器：悬停.滑动{
过渡：1s；
左：0；
}

测试


测试


测试


测试

您的ID属性必须是唯一的、文档范围的。如果您觉得需要为多个元素提供相同的ID，那么您可能应该使用一个类

---

您可以使用伪元素来实现所需的功能。修改数字以获得所需的“箭头”。这使用了边界三角形技术

.wrapper{
溢出：隐藏；
宽度：200px；
高度：30px；
边缘顶部：10px；
}
.幻灯片{
位置：绝对位置；
左：-180px；
宽度：200px；
高度：30px；
过渡：1s；
文本对齐：居中；
}
.包装器：悬停.滑动{
过渡：1s；
左：0；
}
幻灯片：之后{
位置：绝对位置；
边框：6px实心透明；/*箭头高度的一半*/
左边框：10px实心#fff；/*箭头宽度*/
右边界：0；
顶部：8px；/*与顶部的箭头距离*/
右侧：2px；/*箭头与右侧的距离*/
内容：''；
显示：块；
}

测试

测试

测试

测试

我认为您的思路是对的，只是在

中添加了一个绝对值：

内容完成之后：

.wrapper{
溢出：隐藏；
宽度：200px；
高度：30px；
边缘顶部：10px；
}
幻灯片：之后{
内容：“>”；
位置：绝对位置；
排名：0；
右：0；
}
.幻灯片{
位置：绝对位置；
左：-180px；
宽度：200px；
高度：30px；
过渡：1s；
文本对齐：居中；
}
.包装器：悬停.滑动{
过渡：1s；
左：0；
}

测试


测试


测试


测试

更改类的ID，如下所示：

<div class="wrapper">
    <p class="slide" style="background-color:red;">
        test
        <span>></span>
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:blue;">
        test
        <span>></span>
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:yellow;">
        test
        <span>></span>
    </p>
</div>
<div class="wrapper">
    <p class="slide" style="background-color:green;">
        test
        <span>></span>
    </p>
</div>

---

您可以使用

的替代实现：

伪元素之后，使用它创建一个“边界三角形”形状，并将其定位为

绝对

（与>相比，“边界三角形”的优势在于它具有更高的可见性）：

.wrapper{
溢出：隐藏；
宽度：200px；
高度：30px；
边缘顶部：10px；
}
.幻灯片{
位置：绝对位置；
左：-180px；
宽度：200px；
高度：30px；
过渡：1s；
文本对齐：居中；
}
.幻灯片：：之后{
内容：''；
宽度：0；
身高：0；
边框：0.5em实心透明；
左边框颜色：rgba（0,0,0,0.8）；
位置：绝对位置；
右：0；
最高：50%；
边缘顶部：-0.5em；
不透明度：1；
过渡：所有0.4s线性；
}
.幻灯片：悬停：：之后{
不透明度：0.3；
}
.包装器：悬停.滑动{
过渡：1s；
左：0；
}

测试


测试


测试


测试

您可以在幻灯片中添加边框图像。 （请使用class=slide而不是id=slide，并在您的css中更改为#to.）

---

id

s必须是唯一的！好的，我改了，但我认为这对这里没有帮助。。

.wrapper {
    overflow: hidden;
    width: 200px;
    height: 30px; 
    margin-top: 10px;
}
.slide {
    position: absolute;
    left: -180px;
    width: 200px;
    height: 30px;
    transition: 1s;
    text-align: center;
}
.slide span {
    float:right;
    font-weight: bold;
    margin: 5px 5px 0px 0px;
}

.wrapper:hover .slide {
    transition: 1s;
    left: 0;
}

.slide::after {
  content: '';
  width: 0;
  height: 0;
  border: 0.5em solid transparent;
  border-left-color: rgba(0,0,0,0.8);
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -0.5em;
  opacity: 1;
  transition: all 0.4s linear;
}

.slide:hover::after {
  opacity: 0.3;
}

<div class="wrapper">
    <p id="slide" style=" background-color:red;">
        <span>test</span> 
        <span class='arrow'>></span>
    </p>
</div>
<div class="wrapper">
    <p id="slide" style="background-color:blue;">
        <span>test</span> 
        <span class='arrow'>></span>
    </p>
</div>
<div class="wrapper">
    <p id="slide" style="background-color:yellow;">
        <span>test</span> 
        <span class='arrow'>></span>
    </p>

</div>
<div class="wrapper">
    <p id="slide" style="background-color:green;">
        <span>test</span> 
        <span class='arrow'>></span>
    </p>
</div>

.wrapper {
overflow: hidden;
width: 200px;
height: 30px; 
margin-top: 10px;
 }
.arrow{
float: right;
}
#slide {
position: absolute;
left: -180px;
width: 200px;
height: 30px;
transition: 1s;
text-align: center;
}
.wrapper:hover #slide {
transition: 1s;
left: 0;
}

.slide { 
 background-image: url('arrow.jpg');
 background-position: right;
 background-repeat: no-repeat;
 display: block; /* make the link background clickable */
}