我能'；不要让Javascript工作出问题

我把一个网站放在一起，在底部有一排社交图标。我正在使用Javascript在图像悬停时将其替换为不同的颜色

问题是，只有在我开始使用第一个图像后，图像才会改变。我希望用户能够在任何时候将鼠标悬停在其中任何一个上面并使其工作。有什么想法吗

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

HTML:

---

尝试一些更有活力的东西

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

.社会{
显示：块；
宽度：50px；
高度：50px；
溢出：隐藏；
文本缩进：110%；
}
.social.facebook{
背景图片：url（“img/facebookicon.png”）
}
.social.facebook:hover{
背景图片：url（“img/facebookred.png”）
}

您还可以考虑创建一个精灵，它基本上是一个包含所有图像的图像，当背景图像悬停时，您只需重新显示背景图像

---

如果你觉得勇敢，你也可以看看图标字体，我认为这是你最好的选择。您可以更改大小、颜色以及对常规文本所做的任何其他操作，它们可以无限扩展。这里有一个非常流行的（），但是您可以非常轻松地构建自己的（）

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

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

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

---

看看你的代码是如何嵌套的（感谢@j08691的格式化）。你只会在推特上鼠标移动后在facebook上定义鼠标悬停，等等……哇。我建议您暂停编写这段代码，更好地了解您正在使用的工具。这我不知道你为什么要这样做。你在教程中见过这个吗？在jQuery文档中？哪里谁为什么@确实是3067342。查阅教程，花些时间阅读文档：）

<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") 
}

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

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