momsta
momsta

Reputation: 3

Selecting :hover for multiple elements

I have multiple images (.entry) on a page and want to add a button to each that is hidden and displays when the user hovers over the image. I did some research and found how to effect multiple elements when hovering over one. But I want to do the opposite: I want to shorthand my CSS button {"display: block;"} for the hover state of any of the images.

I tried:

1)

.entry01, .entry02, .entry03, .entry04, .entry05, .entry06, .entry07, .entry08, .entry09:hover button{
    display: block;
}

RESULT: Button only shows when I hover over the 9th image

2)

.entry01:hover, .entry02:hover, .entry03:hover, .entry04:hover, .entry05:hover, .entry06:hover, .entry07:hover, .entry08:hover, .entry09:hover button{
    display: block;
}

RESULT: Button only shows when I hover over the 9th image

I assume I can write it out for each individually but was hoping to learn a shorter way. I appreciate any ideas!!! Thanks!!!

Upvotes: 0

Views: 6481

Answers (3)

user1846747
user1846747

Reputation:

Try this...

<div class="entry">Image 1
    <button class="btn">Button 1</button>
</div>
<div class="entry">Image 2
    <button class="btn">Button 2</button>
</div>

.btn{display:none;}
.entry:hover button{display:block;}

Here is a working JSFiddle http://jsfiddle.net/DivakarDass/k0pggay1/

Upvotes: 0

YvesHendseth
YvesHendseth

Reputation: 1181

You could add a new class to all you .entry(1-9) tags in your html code:

<div class="hover entry1></div>
<div class="hover entry2></div>

etc.

and now in your css file:

.hover:hover button{
    display: block;
}

Upvotes: 1

Barmar
Barmar

Reputation: 780798

You need to repeat button in each selector:

.entry01:hover button, .entry02:hover button, .entry03:hover button, ... {
    display: block;
}

Each comma-separated item is treated as a complete selector. If you use a preprocessor like LESS or SASS you may be able to simplify it.

A better solution would probably be to give all of them the same class, e.g.

<div class="entry entry01">...</div>

Then you can just use:

.entry:hover button {
    display: block;
}

Upvotes: 2

Related Questions