悬停时在图像上显示文本

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

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

您还可以使用指针事件来消除问题：

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

但是，应该注意的是，这在 IE10 或更早版本中不受支持。

Answer 2

这个应该更好

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

您可以添加：

指针事件：无;

修复了你的小提琴：

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

例如

杰斯菲德尔

.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.title成为a的孩子。这使得链接在hover时"可见"。在您的光标中，光标不会在hover上更改。
3. 使img使其父级适应width:100%
4. 使用opacity:0而不是display:none
5. 使div.title用height:100%和width:100%填充其父级。这样，hover 的mouseenter事件将与img的事件相匹配
6. 在div.title上设置position:absolute，并通过在其上设置position:relative将其相对于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. 您可以将color:black设置为a，以 ovewrite 默认的蓝色。
2. 您可以向div.title添加display:flex、align-items:center和justify-content:center，以使内容在图像上居中
3. 您可以将transition添加到div.title和div.title:hover。这样可以产生平滑的过渡效果，如果您悬停得足够快，您几乎看不到它。

奖金演示

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