懸停時在圖像上顯示文字

Question

我試圖在圖像上顯示文本並且它可以正常工作，但是當我將鼠標移到文本上時，它會閃爍！

https://jsfiddle.net/6k2Lhaje/

HTML：

<a class="wrapper"> 
<img style="margin-top:50px;" 
src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" 
alt="" /></a> 

CSS：

div.title { 
    display: none; 
    position: relative; 
    text-align: center; 
    top: -170px; 
} 

a.wrapper:hover + div { 
    display: block; 
} 

<div class="title"><h1>TEXT HERE</h1></div> 

請幫我解決這個問題..也許它更好地使用背景圖片呢？

Answer 1

它閃爍，因爲您的光標實際上不再懸停在div上，而是懸停在div上，因此懸停方法不再被觸發。

你可以試試下面的CSS：

div.title:hover, a.wrapper:hover + div { 
    display: block; 
} 

將適用懸停時，在圖像，以及通過股利。 更新您的jsfiddle這裏的版本：https://jsfiddle.net/6k2Lhaje/7/

你也可以使用指針的事件將刪除的問題：

a.wrapper:hover + div { 
    display: block; 
    pointer-events:none; 
} 

但是，應該指出的是，這不是在IE10或之前支持。

Answer 2

您可以添加：

pointer-events：none;

修正你的提琴：

div.title { 
    display: none; 
    position: relative; 
    text-align: center; 
    top: -170px; 
} 

a.wrapper:hover + div { 
    display: block; 
    pointer-events:none; 
} 

https://jsfiddle.net/6k2Lhaje/

Answer 3

應該與此

.title { 
 
    display: none; 
 
    position: relative; 
 
    text-align: center; 
 
    top: -170px; 
 
} 
 

 
.wrap:hover div.title { 
 
    display: block; 
 
}

<div class="wrap"> 
 
    <a class="wrapper"> 
 
     <img style="margin-top:50px;" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="" /> 
 
    </a> 
 
    <div class="title"><h1>TEXT HERE</h1></div> 
 
</div>

Answer 4

解決方案是更好的改變HTML結構

例如

Jsfiddle

HTML

<a class="wrapper"> 
<img style="margin-top:50px;" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="" /> 
<div class="title"><h1>TEXT HERE</h1></div></a> 

CSS

div.title { 
    display: none; 
    position: relative; 
    text-align: center; 
    top: -170px; 
} 

a.wrapper:hover .title { 
    display: block; 
} 

Answer 5

你的鼠標沒有懸停的包裝，當它是在文本。

你的CSS更改爲，所以你顯示塊太大，當你將鼠標懸停文字：

a.wrapper:hover + div.title, 
div.title:hover { 
    display: block; 
} 

更新小提琴：https://jsfiddle.net/6k2Lhaje/10/

Answer 6

那閃爍的是，你是徘徊在文本是主要問題在與懸停有效部分對齊的標籤之外。

解決此問題的更好方法是將文本放入包含圖像的容器中。然後將文字絕對放置在圖像上方。

像這樣：

https://jsfiddle.net/zw8L4g7j/

<a class="wrapper"> 
    <h1>Text</h1> 
<img style="margin-top:50px;" src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg" alt="" /> 
</a> 



h1{ 
    position:absolute; 
    display:none; 
    left:200px; 
    top:150px; 
} 
a:hover h1{ 
    display:block; 
} 

Answer 7

我相信，它閃爍，因爲你的div.title是在a.wrapper的頂部而不被其子元素。因此，當您輸入div.title時，瀏覽器認爲發生a.wrapper的mouseleave事件，a.wrapper的效果hover仍處於活動狀態。

一種更好的方式使預期的效果將是：

1. 使用父div.wrapper爲a，並給它一個固定的大小。這使得事情變得更簡單，因爲a默認爲display:inline。
2. 品牌div.titlea的小孩。這使得鏈接「可見」，當hover。在你的光標不會改變hover。
3. 製作img適合其母公司與width:100%
4. 使用opacity:0，而不是display:none
5. 讓div.title填補其母公司與height:100%和width:100%。通過這種方式，mouseenter事件hover將它設置position:relative匹配一個關於div.title的img
6. 集position:absolute和它相對位置從div.wrapper。
7. 上div.title:hover

這裏設置opacity:1是一個演示：

div.wrapper { 
 
    position: relative; 
 
    width: 500px; 
 
} 
 
div img { 
 
    width: 100%; 
 
} 
 
div.title { 
 
    opacity: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 
div.title:hover { 
 
    opacity: 1; 
 
}

<div class="wrapper"> 
 
    <a href="#"> 
 
    <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"/> 
 
    <div class="title"><h1>TEXT HERE</h1></div> 
 
    </a> 
 
</div>

獎金：

1. 您可以在a噸設置color:black o覆蓋默認的藍色。
2. 您可以display:flex，align-items:center和justify-content:center添加到div.title居中圖像上的內容
3. 您可以添加到transition和div.titlediv.title:hover。這使得平滑的過渡效果，你幾乎不會看到它，如果你翱翔得足夠快。

BONUS DEMO

Answer 8

顯示文本的圖像上，當懸停圖像。

HTML

<div id="container"> 
    <img src="some-image.jpg"> 
    <p>SOME TEXT OVER IMAGE</p> 
</div> 

CSS

#container{ 
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(3, 1fr); 
} 

#container img{ 
    grid-column: 1; 
    grid-row: 1/span 3; 

    width: 100%; 
    height: 100%; 

    overflow: hidden; 
} 

#container p{ 
    visibility: hidden; 

    grid-column: 1; 
    grid-row: 2; 

    align-self: center; 
    justify-self: center; 

    z-index: 1; 
} 

#container:hover p{ 
    visibility: visible; 
}