我希望在将鼠标悬停在某些文本上时显示隐藏图像。我在这里有一个页面。
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;}
最佳答案
您可以缩短 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();
关于jquery - 将鼠标悬停在单独的类上时向元素添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49498054/