Question

我将网站放在一起，底部有一排社交图标。我正在使用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");
                        });
                    });
                });
            });
        });
    });
});

Answer 1

尝试更有活力的东西

$('.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');
    });
});

Answer 2

我知道已经回答了，但我根本不会使用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）

Answer 3

不要为此使用JavaScript，请使用CSS。

a.twitter-icon {
    background: url('twitter-icon.jpg');
}

a.twitter-icon:hover {
    background: url('twitter-icon-hover.jpg');
}

我无法让Javascript无序运行

3 个答案: