图像翻转效果和图像下方的文字
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图像翻转效果和图像下方的文字相关的知识，希望对你有一定的参考价值。
我正在尝试使用图像下方的文本进行图像翻转效果，只有当您将鼠标悬停在图像上时才会显示该图像。当我将鼠标悬停在图像上时会显示文本，但如果我将鼠标悬停在文本上，则图像不会保持活动状态。
即使我将鼠标悬停在文本上，如何激活图像？
#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>答案
我建议将事件监听器绑定到#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>另一答案
只需添加规则，以便文本的悬停也会触发其自身的可见性。 （请注意，我更改了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>另一答案
#wrapper:hover .text, .text:hover {
visibility:visible;
}
以上是关于图像翻转效果和图像下方的文字的主要内容，如果未能解决你的问题，请参考以下文章