我可以'不要让Javascript工作不正常

I can't get Javascript to work out of order

本文关键字：Javascript 工作 不正常 我可以      更新时间：2024-03-04

我正在创建一个网站，底部有一排社交图标。当它们悬停在上面时，我使用Javascript将图像替换为不同的颜色。

问题是，只有当我开始使用第一个图像时，图像才会发生变化。我希望用户能够在任何时候悬停在他们中的任何一个上面，并使其工作。有什么想法吗？

如果有帮助的话，这是我的代码：

HTML:

<div class="socialrow">
    <a href="[Twitter Link]"><img src="img/twittericon.png" class="twitterbutton" alt="Twitter"></a>
    <a href="[Facebook Link]"><img src="img/facebookicon.png" class="facebookbutton" alt="Facebook"></a>
    <a href="[LinkedIn Link]"><img src="img/linkedinicon.png" class="linkedinbutton" alt="LinkedIn"></a>
    <a href="[Tumblr Link]"><img src="img/tumblricon.png" class="tumblrbutton" alt="Tumblr"></a>
    <a href="[Instagram Link]"><img src="img/instagramicon.png" class="instagrambutton" alt="Instagram"></a>
    <a href="[Google+ Link]"><img src="img/googleplusicon.png" class="googleplusbutton" alt="Google+"></a>
</div><!-- end socialrow -->

JS:

$(document).ready(function () {
    $(".twitterbutton").hover(function () {
        $(this).attr("src", "img/twitterred.png");
    }, function () {
        $(this).attr("src", "img/twittericon.png");
        $(".facebookbutton").hover(function () {
            $(this).attr("src", "img/facebookred.png");
        }, function () {
            $(this).attr("src", "img/facebookicon.png");
            $(".linkedinbutton").hover(function () {
                $(this).attr("src", "img/linkedinred.png");
            }, function () {
                $(this).attr("src", "img/linkedinicon.png");
                $(".tumblrbutton").hover(function () {
                    $(this).attr("src", "img/tumblrred.png");
                }, function () {
                    $(this).attr("src", "img/tumblricon.png");
                    $(".instagrambutton").hover(function () {
                        $(this).attr("src", "img/instagramred.png");
                    }, function () {
                        $(this).attr("src", "img/instagramicon.png");
                        $(".googleplusbutton").hover(function () {
                            $(this).attr("src", "img/googleplusred.png");
                        }, function () {
                            $(this).attr("src", "img/googleplusicon.png");
                        });
                    });
                });
            });
        });
    });
});

尝试一些更动态的

$('.socialrow a').on('mouseenter mouseleave', function(e) {
    $('img', this).prop('src', function(_,src) {
        return e.type=='mouseenter' ? src.replace('icon', 'red') : src.replace('red', 'icon');
    });
});

我知道tihs已经得到了回答，但我根本不会使用Javascript。

你可以将其用于你已经拥有的图像：

<a href="http://www.facebook.com/foo" class="social facebook">Facebook</a>
.social {
  display: block;
  width: 50px;
  height: 50px;
  overflow: hidden;
  text-indent: 110%;
}
.social.facebook {
  background-image: url("img/facebookicon.png")
}
.social.facebook:hover {
  background-image: url("img/facebookred.png") 
}

你也可以考虑创建一个精灵，它基本上是一个图像，里面有所有的图像，当背景图像悬停时，你只需重新发布它。

如果你觉得勇敢，你也可以看看图标字体，我认为这是你最好的选择。你可以更改普通文本的大小、颜色和其他任何你可以做的事情，它们是无限可缩放的。这是一个很受欢迎的(http://fontawesome.io/icons/)，但你可以很容易地构建自己的(http://icomoon.io/app/#/select)

不要使用JavaScript，使用CSS。

a.twitter-icon {
    background: url('twitter-icon.jpg');
}
a.twitter-icon:hover {
    background: url('twitter-icon-hover.jpg');
}
相关文章：