Problems with hover CSS

Question

I would like to show an img when i hover over another but nothing is happening. Any advice on what i can do to change the code

**HTML**
 <div id="container-collection">

   <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg">

   <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg">

 </div>

**CSS**

img.closeup1{
    display: none;
}

img.closeup1:hover clothes1 {
    display: block;
}

Helgi · Accepted Answer · 2012-05-18 23:31:55Z

1

As @minitech said, you need to properly combine the controlled element selector with the :hover owner.

I'd go for something like this:

HTML

<div id="container-collection">
    <div class="clothes1-wrap">
        <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg">
        <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg">
    </div>
</div>

CSS

.closeup1 {
    display: none;
}

.clothes1-wrap:hover .closeup1 {
    display: block;
}

For me, this looks a little bit cleaner, plus you can add elements between imgs.

edited May 18, 2012 at 23:31

answered May 18, 2012 at 23:22

Helgi

5,4461 gold badge33 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1404437 Over a year ago

thanks very much, that sorted it. Been messing about with it for hours.

Musa · Accepted Answer · 2012-05-18 23:42:48Z

1

You're missing a . to select a class. It should be .clothes1.
You're missing a combinator; .clothes1 is not a descendant of .closeup1. However, unfortunately, there doesn't yet exist a combinator for "previous sibling". In CSS4, there will be, but not now.

If shuffling the order is okay (you may be able to correct the positioning change with some fancy CSS), you can do this:

<div id="container-collection">

    <img class="closeup1" src="Images/Smaller/bigger ones/JPEG/IMG_3148_1.jpg">

    <img class="clothes1" src="Images/smallest/JPEG/IMG_3148.jpg">

</div>

img.clothes1 {
    display: none;
}

img.closeup1:hover + .clothes1 {
    display: block;
}

edited May 18, 2012 at 23:42

Musa

97.9k17 gold badges123 silver badges144 bronze badges

answered May 18, 2012 at 23:23

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Collectives™ on Stack Overflow

Problems with hover CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related