Question

我希望将鼠标悬停在某些文字上时显示隐藏的图像。我这里有一个页面。

https://image-hover-1.superhi.com/

我的js是：

$(document).ready(function() {     
$('.text').hover(function(){     
    $('.photo').addClass('visible');    
},     
function(){    
    $('.photo').removeClass('hide');     
});
});

我的CSS是：

.hide {display: none;}

.visible {display: block;}

Answer 1

您可以缩短css和js部分。你不需要切换任何课程，只需切换图像本身

＆＃13;

$(document).ready(function() {     
  $('.text').hover(function(){     
     $('.photo').toggle();    
    })     
});

＆＃13;

.photo{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">Hello there</p>
<img src="https://picsum.photos/200/300" class="photo"/>

＆＃13;

请注意切换整个图像集，并指定类=＆＃34;照片＆＃34;。对于这种情况，语句为$(this).next().toggle();

Answer 2

将toggleClass用于此类情况的正确工具

$(document).ready(function() {     
  $('.text').hover(function(){     
     $('.photo').toggleClass('visible');    
    })     
});

.photo{display:none;}
.visible {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="text">Hello there</p>
<img src="https://picsum.photos/200/300" class="photo"/>

Answer 3

$(".photo").hide();
$(".text").hover(function(){
      $(".photo").show();
},
function(){
     $(".photo").hide();
 });

将鼠标悬停在单独的类上时，将该类添加到元素

3 个答案: