Question

我正在尝试在图像上显示文字并且它可以正常工作，但当我将鼠标悬停在文本上时，它会闪烁！

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

将在图像上方以及div上方应用悬停。这里更新了你的jsFiddle版本：https://jsfiddle.net/6k2Lhaje/7/

您还可以使用指针事件来解决问题：

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

但是，应该注意，IE10或之前不支持此功能。

Answer 2

这个应该更好

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以添加：

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

闪烁的主要问题是，您正在悬停的文本是a标记的外部，该标记与hover effekt一起定位。

解决此问题的更好方法是将文本放在包含图像的容器中。然后将文本绝对定位在图像上方。

像这样：

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时，浏览器会认为当mouseleave的{{1}}效果仍然有效时，a.wrapper发生了hover个事件。

更好的方法是产生预期的效果：

对a.wrapper使用父div.wrapper，并为其指定固定大小。这使事情变得更容易，a默认为a。
让display:inline成为div.title的孩子。这使得a时链接“可见”。在您的游标中，光标在hover上不会改变。
通过hover

img

使用width:100%代替opacity:0
使display:none和div.title填充其父级height:100%。这样，width:100%的{{1}}事件将与mouseenter
在hover上设置img，并通过在position:absolute上设置div.title，使其相对于div.wrapper。
在position:relative

opacity:1

这是一个演示：

div.title:hover

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>上设置color:black以覆盖默认的蓝色。
您可以将a，display:flex和align-items:center添加到justify-content:center，以便将内容置于图片中心
您可以将div.title添加到transition和div.title。这会产生平滑的过渡效果，如果你快速盘旋，你几乎不会看到它。

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

在悬停时在图像上显示文本

8 个答案: