jQuery图像切换以实现鼠标悬停和按下功能

Question

我想要实现的目标：

当光标悬停在图片上时（鼠标悬停），首先进行图像交换，然后在单击图片时（鼠标按下单击）进行第二次图像交换。

示例：

我有一张绿色箭头的图片。当鼠标悬停时，它被交换为黄色箭头的图片，当点击时，它被交换为棕色箭头的图片（只要单击保持）。默认的绿色箭头始终会被恢复。

<img src="green-default.png" />
<img src="yellow-over.png" />
<img src="brown-mousedownclick.png" />

我尝试过的方法：

我使用了一个基于鼠标悬停事件的jQuery图像替换方法：

https://github.com/tszming/jquery-swapimage

示例

<script type="text/javascript"> 
jQuery.swapImage(".swapImage"); 
</script>

<img src="green-default.png" class="swapImage {src: 'yellow-over.png'}" />

希望能得到任何建议。

已接受的解决方案

Senad的解决方案（下面）使用了CSS而不是jQuery。链接元素被赋予一个类，该类将其样式设置为与交换的图像尺寸相同的块。这三个图像被应用为链接元素的默认、悬停和活动状态的背景图像。Senad的解决方案和演示代码如下所示。

- Dominor Novus

---

你可以使用CSS完成所有这些事情，不需要jQuery。 - Senad Meškin

+1 非常有结构的问题。@Senad：悬停很容易（:hover），但你如何处理 mousedown？ - Wulf

@Senad：我没有意识到链接的活动状态是“点击/按下”状态。 - Dominor Novus

Answer 1

我建议使用CSS。

CSS（层叠样式表）是一种用于网页设计的语言。

a.your_link_button_class { 
   background: url('green-default.png') no-repeat;
   height: 20px;
   width: 20px;
   display: block;
}
a.your_link_button_class:HOVER {
   background: url('yellow-over.png') no-repeat;
}
a.your_link_button_class:ACTIVE {
   background: url('brown-mousedownclick.png') no-repeat;
}

HTML

<a class="your_link_button_class" href="#nothing"></a>

如果您想要指针光标，也可以通过CSS添加cursor: pointer;

这将适用于所有类名为“your_link_button_class”的链接

在jQuery中防止链接动作

$(document).ready(function() { $('a.your_link_button_class').click( function() { return false; }); });

- Senad Meškin

Answer 2

我会先使用使用jquery预加载图片, 然后在您的img元素上绑定hover和mousedown事件，并更改src属性为正确的图像。

我会使用hover, 因为它可以处理mouseout和mouseover。

因为我使用mousedown，所以我还会使用mouseup来将img更改回来。

更新：

您不必使用jquery进行hover效果，您可以使用css。然后在mousedown和mouseup上更改CSS类以实现所需的效果。

- Ali

---

我能够使用Senad的CSS解决方案来处理这两个事件。关于通过jQuery预加载图像，将图像加载到设置为display:none的div元素中是否足够？ - Dominor Novus

你可以这样做。问题在于你正在将没有任何意义的图像放入DOM中。如果有人禁用CSS访问页面，他们会感到困惑。请记住，你的网站应该在禁用JavaScript和CSS的情况下完全正常运行（理想情况下）。 - Ali

谢谢你的建议，很有道理。在页面末尾放置一块随机图片确实会让用户感到困惑。 - Dominor Novus

Answer 3

绑定mouseover/out和mousedown/up并保存状态，这样在鼠标按钮仍按下时mouseout事件不会移除棕色图标。然后调用一个函数并查看鼠标按钮是否按下或鼠标是否悬停在图标上。如果没有，则设置默认图像。

$('#img').mouseover(function() {
    $(this).data('over',true);
    updateImage($(this));
}).mousedown(function() {
    $(this).data('down',true);
    updateImage($(this));
}).mouseup(function() {
    $(this).data('down',false);
    updateImage($(this));
}).mouseout(function() {
    $(this).data('over'false);
    updateImage($(this));
});

function updateImage(elem) {
    if (elem.data('down')) {
        elem.attr('src','brown.png');
    } else if (elem.data('over')) {
        elem.attr('src','yellow.png');
    } else {
        elem.attr('src','green.png');
    }
}

- Wulf

---

嘿，Wulf。我选择了CSS方法，因为它需要较少的编码。 - Dominor Novus

Answer 4

你可以使用 hover 方法，结合 mousedown 和 mouseup 事件，然后简单地相应地更改图像的 src 属性。

$("#yourImageId").hover(function() {
    $(this).attr("src", "yellow-over.png");
}, function() {
    $(this).attr("src", "green-default.png");
}).mousedown(function() {
    $(this).attr("src", "brown-mousedownclick.png");
}).mouseup(function() {
    $(this).attr("src", "green-default.png");
});

- James Allardice

---

谢谢提供示例代码，但Senad提供的CSS方法似乎需要更少的代码。在这种特定情况下，使用jQuery是否比CSS有任何优势？ - Dominor Novus