Question

我尝试使用CSS-Solution在悬停特殊按钮时显示其他按钮。

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如何在悬停按钮时显示另外两个按钮＆＃34; add_cart＆＃34;？

Answer 1

你只能为第三个按钮实现这一点＆＃34; add_compare＆＃34;因为它是＆＃34;之后＆＃34; ＆＃34; add_cart＆＃34;按钮使用这样的东西（假设你给他们ID add_cart和add_compare）：

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

但据我所知，对于第一个按钮，使用纯CSS无法完成。您需要使用Javascript。

当鼠标悬停在button1上时显示button2

1 个答案: