圖像翻轉效果和圖像下方的文字

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>