Я не могу заставить Javascript работать не в порядке

Я помещаю сайт вместе, и у меня есть ряд социальных значков внизу. Я использую Javascript для замены изображения с другим цветом, когда они зависают.

Проблема в том, что изображения будут меняться только после того, как я начну с первого. Я хочу, чтобы пользователи могли нависнуть над любым из них в любое время и заставить его работать. Есть предположения?

Здесь мой код, если он помогает:

HTML:

<div>
 
 
 
 
 
 
</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");
 });
 });
 });
 });
 });
 });
});
3 ответа

Я знаю, что уже ответил, но я не буду использовать Javascript для этого.

Вы можете использовать это с изображениями, которые у вас уже есть:

<a href="http://www.facebook.com/foo" target="_blank">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)


Попробуйте что-то более динамичное

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


Не используйте JavaScript для этого, используйте CSS.

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

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

licensed under cc by-sa 3.0 with attribution.