Question

我有一个sprite图像，而不是当mouseenter / mouseleave出现在它上面时，背景位置会发生变化。到目前为止，虽然可能有一种更有效的方法，但它仍然有效。但是我有几个图像我需要这样做，并试图找到一种方法将图像的ID提供给jQuery而不是重复代码。
HTML：

<div class='featSmallBox' id='featSmallImg2'>
</div>

使用CSS放置图像源这就是我目前为jQuery所做的。

 $("#featSmallImg2").mouseenter(function(){
                    $(this).animate({
                   backgroundPositionX:"100%"
                     });
                   });

 $("#featSmallImg2").mouseleave(function(){
                    $(this).animate({
                   backgroundPositionX:"0%"
                     });
                    });

理想情况下，我需要提供动态鼠标的内容，但我尝试的所有内容似乎都无法正常工作。
道歉，如果这几乎没有意义。我是jQuery和这个网站的新手。

Answer 1

如果包含精灵的所有div的jQuery代码相同，请尝试将jQuery中的$("#featSmallImg2")更改为$(".featSmallBox")。这样，所有具有班级.featSmallBox的div都将具有此功能。

Answer 2

使用 event.target

进行检查

$( "body" ).mouseenter(function( event ) {
   console.log( "mouseentered id: " + event.target.id);
});

Answer 3

$("div[id^='featSmallImg']").mouseenter(function(){
                    $(this).animate({
                   backgroundPositionX:"100%"
                     });
                   });

$("div[id^='featSmallImg']").mouseleave(function(){
                    $(this).animate({
                   backgroundPositionX:"0%"
                     });
                    });

试试这段代码。将为所有以“featSmallImg”

开头的div调用事件

获取animate jQuery的元素id

3 个答案: