[英]Having multiple image with same hover over effects
So i currently have multiple images on a page, however when i want over hover effect on the one that is being hovered over. 所以我目前在一页上有多张图像,但是当我想要将鼠标悬停在上面的效果时。 Where the page has more than 12 images, one way is to replicate this code 12 times, with an id but is there a more efficient way:
如果页面上有12张以上的图片,一种方法是使用id将此代码复制12次,但是有一种更有效的方法:
$("img").hover(function () {
$("img").addClass("transition");
}, function () {
$("img").removeClass("transition");
});
You could use in/out
hover handler to toggle the class: 您可以使用
in/out
悬停处理程序来切换类:
$("img").hover(function () {
$(this).toggleClass("transition");
});
But be aware, this could be done using only CSS with pseudo class :hover
if your goal is just to apply transition to these images. 但是请注意,如果您的目标只是将过渡应用于这些图像,则可以仅使用伪类为
:hover
CSS来完成此操作。
In order to apply hover effect only on currently hovered image and not on the other images, use $(this)
as shown below :- 为了只在当前悬停的图像上而不在其他图像上应用悬停效果,请使用
$(this)
,如下所示:-
$("img").hover(function () {
$(this).addClass("transition");
}, function () {
$(this).removeClass("transition");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.