Я сделал анимацию при наведении курсора мыши, когда я наведу курсор мыши на ссылку, она покажет изображение, а когда я наведу курсор мыши на другую ссылку, предыдущее изображение должно исчезнуть и показать другое изображение, принадлежащее другой ссылке.
<style>
.imgHover {
display: inline;
position: relative;
}
.hover {
display: none;
position: absolute;
z-index: 2;
}
</style>
<script type="text/javascript">
$(function() {
$(".imgHover").hover(
function() {
$(this).children("img").fadeTo(200, 0.85).end().children(".hover").fadeIn(100);
},
function() {
$(this).children("img").fadeTo(200, 1).end().children(".hover").fadeOut(100)();
});
});</script>
<a class="imgHover" href="htpp://google.com">Text Link 1
<img class="hover" src="image_link1.jpg" alt=""></a>
<a class="imgHover" href="htpp://google.com">Text Link 2
<img class="hover" src="image_link2.jpg" alt=""></a>
///////////////////////////////////
Могу ли я переместить код ссылки, и когда я наведу курсор мыши на текстовую ссылку 1, сценарий выберет изображение 1 ... Пожалуйста, помогите.
<div id="imageshow">
<img class="hover" src="image_link1.jpg" alt="">
<img class="hover" src="image_link2.jpg" alt="">
</div>
<div id="link">
<a class="imgHover" href="htpp://google.com">Text Link 1 </a>
<a class="imgHover" href="htpp://google.com">Text Link 2 </a>
</div>