Question

我真的希望我的措辞正确。请随时要求任何澄清。

我有一个 ul ， li 浮动左边，如下所示：

每个都在右上角有一个链接，这里是HTML：

<li>
    <div class="description">
        <p><strong>Title</strong><br>
        <br />
        This worksheet features diagrams of the different molecule structures found in solids liquids and gases, and descriptions of the different states. Simply label the diagram and draw a line to link the description to the diagram to complete the workshe</p>
    </div>
    <a class="fav_icon" data-id="71933" title="favorite">Fav</a>
</li>

该div＆＃39;描述＆＃39;在li悬停之前有display：none属性，然后它有显示块。

右上角的链接（红色圆圈）是文章的首选链接。它有一个z指数：99999以及现在位置绝对右上角。

问题是，如果悬停在div上的时间太长而且超过了下面的div，则右上角的链接会过去，如下所示：

我需要 .fav_icon 当前悬停的divs子项高于悬停，但是，我需要其余的更低。所以看起来应该是这样的：

任何想法如何实现这一目标？

编辑：CSS

这是CSS：

 .resource-preview {

 .description {
  display: none;
  background-color: rgba(14, 134, 201, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  padding: 10px;
  z-index: 99999;
  text-align: center;
  border-radius: 4px;


  p {
    padding-top: 25px;
    color: #fff;
    padding: 10px;
  }
}

  &:hover {
    .description {
      display:block;
    }
  }


.fav_icon {

  padding: 3px 5px;
  height: 21px;
  right: 5px;
  top: 5px;
  position: absolute;
  left: auto;
  outline: 3px solid white;
  z-index: 9999;

}

Answer 1

我为你写了一些样本。如果你等待悬停在li上 - 比没什么大不了 - 你只需要改变当前li的z-index;）

https://codepen.io/samuells/pen/gWJyBv?editors=0100

li:hover {
 p {
  display: block;
  background-color: firebrick;
  z-index: 11;
 }
 a {
  z-index: 12;
 }
}

Answer 2

在下面找到具有正确z-index设置的示例。最重要的是图标的-1。

.description {
display:none;
font-size:9px;
background-color:white;
margin-top: 35px;
padding: 5px;
}
li:hover .description {
display:block;
z-index:1;
}
li {
float:left;
clear:both;
width: 100px;
height: 150px;
list-style:none;
border: thin solid #000;
border-radius: 8px;
position:relative;
}
.fav_icon {
font-size: 10px;
background-color: red;
border-radius:50%;
width:30px;
height:30px;
position:absolute;
right:1px;
top:1px;
z-index:-1;
)

<ul>
<li>
    <div class="description">
        <p><strong>Title</strong><br>
        <br />
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <a class="fav_icon" data-id="71933" title="favorite"></a>
</li>
<li>
    <div class="description">
        <p><strong>Title 2</strong><br>
        <br />
        This worksheet features diagrams of the different molecule structures found in solids liquids and gases, and descriptions of the different states. Simply label the diagram and draw a line to link the description to the diagram to complete the workshe</p>
    </div>
    <a class="fav_icon" data-id="71933" title="favorite"></a>
</li>
</ul>

Answer 3

您只需更改首先放置图标的html即可。然后只是给你的描述提供任何正的z-index值就足够了。

＆＃13;

div {
  float:left;
  width:30%;
  margin-right:10px;
  border:1px solid #000;
  height:100px;
  position:relative;  
}
span {
  position:absolute;
  width:30px;
  height:30px;
  top:10px;
  right:10px;
  border-radius:50%;
  background-color:red;
  display:block;
}
p {
  display:none;
  width:100%;
  background-color:#bbb;
  border:1px solid #000;
  z-index:20;
  position:relative;
}
div:hover p {
  display:block;
  
}

＆＃13;

<div>
    <span></span>
   <h4>title</h4>
   <p class="description">descriptidescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thison as long as this</p>
   
</div>
<div>
    <span></span>
   <h4>title</h4>
   <p class="description">descriptidescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thison as long as this</p>
   
</div>
<div>
    <span></span>
   <h4>title</h4>
   <p class="description">descriptidescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thison as long as this</p>
   
</div>
<div>
    <span></span>
   <h4>title</h4>
   <p class="description">descriptidescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thisdescription as long as thison as long as this</p>
   
</div>

＆＃13;

Answer 4

你可以为兄弟姐妹使用风格

li:hover ~ li .fav_icon
{
   z-index: *as u want*;
}

CSS：悬停时要更改的下一个元素的z-index

4 个答案: