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

Question

我真的很希望我能正确表达这一点。请随时要求澄清所需。

我有一个UL与李浮动离开，像这样：

每个那些

在右上角的链接，这里是那些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'description'具有display：none属性，直到li悬停，然后它有显示块。

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

问题是，如果在上空盘旋的div太长，运行在下面的DIV，右上方链接越过，像这样：

我所需要的电流盘旋的div的孩子.fav_icon要比悬停高，但是，我需要其余的要低。所以它应该是这样的：

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

编辑：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

我写了一个小样品给你。如果您在里等待悬停 - 比它没什么大不了的 - 你必须只改变电流I的z指数）

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

U可以使用样式兄弟姐妹

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

Answer 3

查找下面用正确的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 4

你可以只改变HTML把图标第一。然后只要给你的描述任何积极的z-索引值就足够了。

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

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