图片翻转效果和图片下方的文字答案

【问题标题】：Image rollover effect and text below the image图片翻转效果和图片下方的文字
【发布时间】：2018-02-21 02:46:34
【问题描述】：

我正在尝试使用仅在您将鼠标悬停在图像上时出现的文字在图像下方制作图像翻转效果。当我将鼠标悬停在图像上时，文本会出现，但如果我将鼠标悬停在文本上，图像不会保持活动状态。

即使将鼠标悬停在文本上，如何保持图像处于激活状态？

#wrapper .text {
  position: relative;
  left: 0px;
  visibility: hidden;
}
#wrapper:hover .text {
  visibility: visible;
}

<div id="wrapper">

  <img src="http://pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg" 
    onmouseover="this.src='http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg'" 
    onmouseout="this.src='http://pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg'">
    
  <p class="text" style="text-align: left;">TEXT TEXT TEXT TEXT</p>
  
</div>

【问题讨论】：

标签： javascript html css hover

【解决方案1】：

我建议将事件侦听器绑定到#wrapper 元素而不是图像本身。这样，:hover 和 onmouse 事件都绑定到同一个元素。例如：

var wrapper = document.getElementById('wrapper');
var image = document.getElementById('theimage');
wrapper.addEventListener('mouseover', function() {
  image.src = '//www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg'
})
wrapper.addEventListener('mouseout', function() {
  image.src = '//pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg';
});

img {
  max-width: 80px;
}
#wrapper {
  display: inline-block;
  padding: 1em;
  background-color: rgba(0, 0, 255, .2);
}

#wrapper .text {
  visibility: hidden;
}
#wrapper:hover .text {
  visibility: visible;
}

<div id="wrapper">
  <img id="theimage" src="//pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg">
  <p class="text">TEXT TEXT TEXT TEXT</p>
</div>

编辑

这是另一种仅使用 CSS 的方法。这两个图像都包含在 HTML 中，并且它们的显示模式在 #wrapper 悬停时切换。

img {
  max-width: 80px;
}

#wrapper {
  display: inline-block;
  padding: 1em;
  background-color: rgba(0, 0, 255, .2);
}

.image_off {
  display: block;
}
.image_on {
  display: none;
}

#wrapper:hover .image_off {
  display: none;
}
#wrapper:hover .image_on {
  display: block;
}

#wrapper .text {
  visibility: hidden;
}
#wrapper:hover .text {
  visibility: visible;
}

<div id="wrapper">
  <img class="image_off" src="//pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg">
  <img class="image_on" src="//www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg">
  <p class="text">TEXT TEXT TEXT TEXT</p>
</div>

【讨论】：

非常感谢！效果很好。

【解决方案2】：

只需添加一条规则，文本的悬停也会触发其自身的可见性。（请注意，我更改了 src 和 onmouseout 值，因为链接似乎已失效，请调整此值以供最终使用）

#wrapper .text {
  position: relative;
  left: 0px;
  visibility: hidden;
}

#wrapper:hover .text,
#wrapper .text:hover {
  visibility: visible;
}

<div id="wrapper">
  <img src="http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg" onmouseover="this.src='http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg'" onmouseout="this.src='http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg'">

  <p class="text" style="text-align: left;">TEXT TEXT TEXT TEXT</p>
</div>

【讨论】：

【解决方案3】：

#wrapper:hover .text, .text:hover {
visibility:visible;
}

【讨论】：