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

Question

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

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

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

事情很简单。这是一个有 4 个链接的菜单。它是部分隐藏的，但悬停时它会完全显示。我想在 div 的可见部分添加一个小箭头。有办法做到吗？我已经尝试过这个:

.slide:after {
  content: '                 >';
}

当然这可行，但我认为还有更好的方法!

Answer 1

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

<小时/>

您可以使用伪元素来实现您正在寻找的内容。修改数字以获得你想要的“箭头”。这使用了边框三 Angular 形技术。

.wrapper {
    overflow: hidden;
    width: 200px;
    height: 30px;
    margin-top: 10px;
}
.slide {
    position: absolute;
    left: -180px;
    width: 200px;
    height: 30px;
    transition: 1s;
    text-align: center;
}
.wrapper:hover .slide {
    transition: 1s;
    left: 0;
}
.slide:after {
    position: absolute;
    border:6px solid transparent; /* Half the height of arrow */
    border-left:10px solid #fff; /* Width of arrow */
    border-right:0;
    top:8px; /* Arrow distance from top */
    right:2px; /* Arrow distance from right */
    content:'';
    display:block;
}

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

<小时/>

相关:

• How does this CSS triangle shape work?