Show other image on mouse hover with fade effect issue
Question
I´m trying to change my images on mouse hover to other image with fade effect. I think I´m doing everything correct but its not working and my image that I want to appear first is hidden but I dont understand why this is happening, because I think the code is right! Do you see any issue in the code?
My Html:
<section id="body-container">
<div id="body">
<div id="body-content">
<article id="loop-news">
<img id="hidden">
<img id="show" src="images/image1.jpg" />
<h2>Title 1</h2>
<p>Post 1</p>
</article>
<article id="loop-news">
<img id="hidden">
<img id="show" src="images/image1.jpg" />
<h2>Title 2</h2>
<p>Post 2</p>
</article>
</div>
</div>
</section>
My jQuery:
$('#show').hover(function() {
$(this).stop(true).fadeTo("slow", 0);
}, function() {
$(this).stop(true).fadeTo("slow", 1);
});
My css:
#hidden {
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 160px;
background: red;
z-index: -1
}
2 answers
solution1
3 ACCPTED 2014-03-22 03:15:59
The problem is that you have repeating IDs, which you cannot have . You should change them to classes and use .className instead
You also need to have position:relative; on the container ( loop-news ) to make the position:absolute for the hidden images to work correctly
.loop-news {
position:relative;
}
Also, instead of using an id #body , just use the <body> element or preferably rename to something else. It doesn't make sense to have a <section> tag around the body
solution2
1 2014-03-22 03:15:07
There is same ids are using fo different elements like
loop-news for article element
hidden for img element
show for img elemnt
The id is unique. it should be used only once for a element in html.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.