3

我想要达到的目标：

我希望当光标在图像上（鼠标悬停）时首先发生图像交换，然后在单击图像时发生图像交换（鼠标向下单击）。

例子：

我有一个绿色箭头的图像。对于鼠标悬停，它会换成黄色箭头的图像，单击时会换成棕色箭头的图像（但只要按住单击）。始终恢复默认的绿色箭头。

<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 的解决方案和演示代码贴在下面。

4

4 回答 4

4

我会选择 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; }); });
于 2011-09-08T19:28:18.463 回答
2

我会先使用 jquery 预加载图像，然后在你的元素上绑定hover和将 src 属性更改为正确的图像。mousedownimg

我会使用hover，因为它可以处理mouseout以及mouseover.

由于我使用mousedown我也会使用mouseup将 img 改回来。

更新

您不必使用 jquery 来获得hover效果，您可以使用 css 来实现。然后打开mousedown并mouseup更改 css 类以达到预期的效果。

于 2011-09-08T19:22:10.550 回答
1

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

$('#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');
    }
}
于 2011-09-08T19:22:43.093 回答
1

您可以使用该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");
});
于 2011-09-08T19:24:12.917 回答