當懸停與絕對位置的div讓懸停關閉

Css初學者問!!當我試圖懸停的文本有絕對的位置，懸停不見了。不能解決它。也許z指數解決問題，但我不能it.Thanks你的幫助提前。 Fiddle 當懸停與絕對位置的div讓懸停關閉

*{ 
 
    padding:0; 
 
    margin:0; 
 
} 
 
body { 
 
    background:#eee; 
 
    font-family:helvetica; 
 
    font-weight:bold; 
 
} 
 
.news { 
 
    position:relative; 
 
    left:50%; 
 
    margin-left:-300px; 
 
    margin-top:50px; 
 
    width:600px; 
 
    height:300px; 
 
    border-top:3px solid #f26222; 
 
    overflow:hidden; 
 
    z-index:1; 
 
} 
 
.news img { 
 
    cursor:pointer; 
 
} 
 
.text { 
 
    position:absolute; 
 
    top:85%; 
 
    transition:all 0.3s ease; 
 
    
 
} 
 
.text h2 { 
 
    margin-bottom:20px; 
 
    text-align:center; 
 
} 
 
.text p { 
 
    margin-left:10px; 
 
    margin-right:10px; 
 
    font-weight:normal; 
 
} 
 
.news img:hover + .text { 
 
    top:65%; 
 
} 
 
span { 
 
    position:absolute; 
 
    top:0; 
 
    background:#f26222; 
 
    color:#eee; 
 
    padding:3px; 
 
}

<div class="news"> 
 
    <span>Technology</span> 
 
<img src="http://i.imgur.com/YlkCC9u.jpg" height=300 , width=600> 
 
    <div class="text"> 
 
    <h2>LOREM IPSUM ETIAM EST</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p> 
 
    </div> 
 
</div>

來源

2015-09-04 Norx

你是說，當你將鼠標懸停你想要的東西發生的文本？ – cocoa

當你將鼠標懸停在文本上時，你正在改變文本的位置，那麼爲什麼當你將鼠標懸停在文本上時它會「離開」呢？ –

當懸停img文本顯示比懸停文本文本不顯示。 – Norx

更換

.news img:hover + .text { 
    top:65%; 
}

與

.news:hover .text { 
    top:65%; 
}

試試這個。

<div class="news"> 
    <span>Technology</span> 
<img src="http://i.imgur.com/YlkCC9u.jpg" height=300 , width=600> 
    <div class="text"> 
    <h2>LOREM IPSUM ETIAM EST</h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat</p> 
    </div> 
</div> 

*{ 
    padding:0; 
    margin:0; 
} 
body { 
    background:#eee; 
    font-family:helvetica; 
    font-weight:bold; 
} 
.news { 
    position:relative; 
    left:50%; 
    margin-left:-300px; 
    margin-top:50px; 
    width:600px; 
    height:300px; 
    border-top:3px solid #f26222; 
    overflow:hidden; 
} 
.news img { 
    cursor:pointer; 
} 
.text { 
    position:absolute; 
    top:85%; 
    transition:all 0.3s ease; 

} 
.text h2 { 
    margin-bottom:20px; 
    text-align:center; 
} 
.text p { 
    margin-left:10px; 
    margin-right:10px; 
    font-weight:normal; 
} 
.news:hover .text { 
    top:65%; 
} 
span { 
    position:absolute; 
    top:0; 
    background:#f26222; 
    color:#eee; 
    padding:3px; 
}

- 編輯 -
JSFiddle

來源

2015-09-04 19:27:13 Aakash

謝謝。我知道解決方案很簡單。 – Norx

不客氣。 – Aakash

當懸停與絕對位置的div讓懸停關閉

回答

相關問題