При наведении на кнопку button1 show button2

Question

Я пытаюсь использовать CSS-решение для отображения других кнопок при наведении специальной кнопки.

HTML-код.

<div class="button-group"> 
    <button type="button" name="add_wishlist"><i class="fa fa-heart "></i></button> 
    <button type="button" name="add_cart"><i class="fa fa-shopping-cart "></i></button> 
    <button type="button" name="add_compare"><i class="fa fa-exchange "></i></button> 
</div> 

CSS-код выглядит следующим образом:

.button-group button { 
    color    : #999; 
    font-family  : 'FontAwesome'; 
    font-size   : 1rem; 
    font-weight  : normal; 
    margin    : 0; 
    padding   : .500rem 0.875rem; 
    background   : #fff; 
    display   : inline-block; 
    transition   : all 0.3s linear; 
    -moz-transition : all 0.3s linear; 
    -webkit-transition : all 0.3s linear; 
    opacity   : 0; 
} 

.button-group button[name="add_cart"] { 
    opacity : 1; 
} 

Моя идея с

.button-group button[name="add_cart"]:hover + .button-group button[name="add_compare"] { 
    opacity : 1; 
} 

не работает.

Как CSS должен выглядеть, чтобы показать две другие кнопки при наведении на кнопку «add_cart»?

Answer 1

Вы могли бы добиться этого только для третьей кнопки «add_compare» как она есть «после» кнопка «add_cart», используя что-то вроде этого (если вы даете им ID add_cart и add_compare):

#add_cart:hover + #add_compare { 
      opacity:1; 
    } 

Но насколько я знаю, для первой кнопки это невозможно сделать, используя чистый CSS. Для этого вам нужно будет использовать Javascript.