javascript - 对于事件页面链接，我如何使用作悬停显示的 data-alt-src 图像变为事件状态

Question

对于事件页面链接，如何使用作悬停显示的 data-alt-src 图像显示为事件:

<div class="navigation"><ul><li><a href="#" class="swap_image"><img class="icons" data-alt-src="images/menu-i1-h.png" src="images/menu-i1.png" alt=""></a></li></ul></div>

这是javascript

 var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

$(function () {
    $('.swap_image img').hover(sourceSwap, sourceSwap);
});

因此，如果使用 active，则 data-alt-src 将默认显示。怎么能这样呢？ http://screencast.com/t/ydcER96G9L9

Using something like this: <div class="navigation"><ul><li class="active"><a href="#" class="swap_image"><img class="icons" data-alt-src="images/menu-i1-h.png" src="images/menu-i1.png" alt=""></a></li></ul></div>

Answer 1

我已经在此处复制了您的代码并更正了您在 html 中的拼写错误:

https://jsfiddle.net/jskd2der/

现在一切正常。

我刚刚改变了这个:

<div class="navigation">`<ul>`<li><a href="#" class="swap_image"><img class="icons" data-alt-src="images/menu-i1-h.png" src="images/menu-i1.png" alt=""></a></li></ul></div>

对此:

<div class="navigation"><ul><li><a href="#" class="swap_image"><img class="icons" data-alt-src="images/menu-i1-h.png" src="images/menu-i1.png" alt=""></a></li></ul></div>

现在你说“显示为活跃”是什么意思，你想显示什么？请尝试更具体一些。