Выбор: наведение для нескольких элементов

Question

У меня есть несколько изображений (.entry) на странице и вы хотите добавить кнопку к каждому, что скрыто, и отображается, когда пользователь наводил на изображение. Я провел некоторое исследование и нашел, как воздействовать на несколько элементов при падении над одним. Но я хочу сделать обратное: я хочу сократить свой CSS button {"display: block;"} для состояния зависания любого из изображений.

Я пробовал:

1)

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

РЕЗУЛЬТАТ: Кнопка показывает только, когда я наведите курсор мыши на 9-изображение

2)

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

РЕЗУЛЬТАТ: Кнопка показывает только когда я нависаю над 9-м изображением

Я предполагаю, что могу написать его для каждого отдельно, но надеялся узнать более короткий путь. Я ценю любые идеи !!! Благодаря!!!

Answer 1

Вы должны повторять button в каждом селекторе:

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

Каждый разделенный запятыми элемент рассматривается как полный селектор. Если вы используете препроцессор типа LESS или SASS, вы можете его упростить.

Лучшим решением, вероятно, было бы предоставление всем им одного и того же класса, например.

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

Тогда вы можете просто использовать:

.entry:hover button { 
    display: block; 
} 

Answer 2

Вы можете добавить новый класс все, что вы .entry (1-9) теги в вашем HTML код:

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

и т.д. .

и теперь в вашем файле css:

.hover:hover button{ 
    display: block; 
} 

Answer 3

Попробуйте это ...

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

Вот рабочий JSFiddle http://jsfiddle.net/DivakarDass/k0pggay1/