CODEWITHSUNDEEP
javascriptjqueryhtmlcss
John23
John23

Reputation: 219

Show other image on mouse hover with fade effect issue

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
}

Upvotes: 0

Views: 333

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 25944

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;
}

Demo

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

Upvotes: 3

Suman Bogati
Suman Bogati

Reputation: 6349

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.

Upvotes: 1

Related Questions