Новое изображение при наведении на ссылку

0
<div id="social-links"> 
    <div><a href=""><img src="pictures/facenh.png"/></a></div>
    <div><a href=""> <img src="pictures/twitternh.png"  /></a></div>
    <div><a href=""> <img src="pictures/ytnh.png"  /></a></div>
    <div><a href=""> <img src="pictures/mailnh.png"  /></a> </div>  
</div>

Это код, который я использую. То, что я хочу сделать, - это сделать еще одно изображение при наведении на изображение/ссылку. Я не уверен, как это сделать, поэтому я бы очень хотел помочь.

#social-links {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -20px;
}

Если вам нужно знать css для социальных ссылок, это прямо там. Все, что я хочу сделать, - это сделать еще одно изображение, зависающее над ссылками/изображениями. Возможно, Javascript необходим?

Теги:
hyperlink
web

2 ответа

0
Лучший ответ

Вот решение jQuery. Загадка здесь.

$("#facebook").hover( function () {
    $(this).find("img").attr('src', "http://placehold.it/150x150/ff0000/000000");
}, function () {
    $(this).find("img").attr('src', 'http://placehold.it/150x150');
});

Я действительно думаю, что эта ссылка от @talemyn - это то, что вы ищете. В любом случае нужно выполнить эту работу.

2

JavaScript не требуется, вы можете просто использовать CSS.

Не очень хорошая практика использовать изображения для ссылок, поскольку поисковые системы не будут читать их или получать от них какой-либо контекст. Гораздо лучше иметь текстовую ссылку, которую вы заменяете изображением в CSS - например

<div id="social-links"> 
    <div><a href="" id="facebookLink"><span>Facebook</span></a></div>
    ...
</div>

Затем в вашем CSS просто спрячьте текст и замените изображение как стандартным, так и зависающим.

#social-links {
    float: left;
    width: 100px;
    height: 500px;
    margin-left: -20px;
}

#social-links a span {
    display: none;
}

#facebookLink {
    display: block;
    background: url('path-to-facebook-image.jpg');
    width: 50px;
    height: 50px;
}

 #facebookLink:hover {
    background: url('path-to-facebook-hover-image.jpg');
}
  • 1
    1+ Без Javascript!
  • 0
    Это путь. Я просто пытался придерживаться разметки, которую они уже имели. Плюс один от меня.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню