图像翻转效果和图像下方的文字

Question

我正在尝试使用图像下方的文本进行图像翻转效果，只有当您将鼠标悬停在图像上时才会显示该图像。当我将鼠标悬停在图像上时会显示文本，但如果我将鼠标悬停在文本上，则图像不会保持活动状态。

即使我将鼠标悬停在文本上，如何激活图像？

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

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

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

Answer 3

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