Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

我建议将事件侦听器绑定到id2元素而不是图像本身。这样，$("#id").on('mousedown', function(event) { if (event.target.id === 'id2') { console.log('Mousedown evet fired from id2, aborting...'); return; } console.log('Mousedown on id'); }); $("#id2").on('click', function(event) { event.stopPropagation(); console.log('Click on id2'); });和<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id"> ID 1 <div id="id2"> ID 2 </div> </div>事件都绑定到同一个元素。例如：

#wrapper

:hover

onmouse

修改

这是另一种仅使用CSS的方法。这两个图像都包含在HTML中，并且它们的显示模式在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>

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

3 个答案:

修改