jquery - 将鼠标悬停在单独的类上时向元素添加类

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 部分。你不需要切换任何类，只需切换图像本身

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

.photo{display:none;}

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

请注意切换您分配给 class="photo"的整组图像。对于这种情况，语句是 $(this).next().toggle();