Question

我想知道是否有一种方法可以在div的末尾添加部分隐藏的内容。

＆＃13;

.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;
}

＆＃13;

    <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>

＆＃13;

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

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

当然有效，但我认为这是一个更好的方法！

Answer 1

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

你可以使用伪元素来实现你正在寻找的东西。修补数字以获得所需的“箭头”。这使用了边界三角形技术。

.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?

Answer 2

我认为你选择了正确的方法，只需在:after内容中添加绝对值即可：

.wrapper {
  overflow: hidden;
  width: 200px;
  height: 30px;
  margin-top: 10px;

}
.slide:after {
  content: ">";
  position: absolute;
  top: 0;
  right:0;
}
.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>

如果您希望箭头在悬停时消失，您可以使用：

.slide:hover:after {
  content: "";
}

Answer 3

您可以使用::after伪元素的替代实现，使用它来创建边框三角形＆＃39;形状，并定位它absolute（＆gt;边界三角形的优势在于使用＆gt;只是因为它具有相当高的可见度）：

.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;
}

＆＃13;

.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::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;
}
.wrapper:hover .slide {
  transition: 1s;
  left: 0;
}

＆＃13;

<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>

＆＃13;

另请注意，虽然您已在问题中更改了已发布的代码，但使用重复的id会立即使您的HTML无效;这就是我使用课程的原因（就像你在编辑问题时一样）。

Answer 4

更改类的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>

和css：

.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;
}

http://jsfiddle.net/tsoz57mt/4/

Answer 5

<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>

CSS ----------------

.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;
}

Answer 6

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

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

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

6 个答案: