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

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

只需添加一条规则，文本的悬停也会触发其自身的可见性。 （请注意，由于链接似乎已失效，因此我更改了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 2

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

Answer 3

我建议将事件侦听器绑定到#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>