CSS：ホバー上で変更する次の要素のz-インデックス

Question

私はこれを正確に言いたいと思います。必要な説明があればお気軽にお問い合わせください。

を、それらのそれぞれは、右上隅にあるリンクを持って、ここに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> 

私は UL と李フロートがそうのように残っている

そのdivの 'description'は、liがホバリングされるまでdisplay：noneプロパティを持ち、表示ブロックを持ちます。

右上のリンク（赤い丸）は、記事へのリンクです。それはz-インデックス：99999を持ち、絶対トップ右に位置します。

Iが電流を必要とする

が推移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

私はあなたのために少しのサンプルを書きました。それは大したことではないよりも - - あなたは李にホバーを待っている場合は、単に現在のLiの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

兄弟

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

Answer 3

が正しいのzインデックスを設定した例の下の検索のためにUスタイルを使用することができます。最も重要なのはアイコンの-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>