<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 необходим?
Вот решение 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 - это то, что вы ищете. В любом случае нужно выполнить эту работу.
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');
}