Reputation: 3
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
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
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
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