悬停时在图像上显示文字

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