當懸停在按鈕1上顯示按鈕2

我嘗試使用CSS解決方案來顯示其他按鈕時懸停一個特殊的按鈕。當懸停在按鈕1上顯示按鈕2

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」上的其他兩個按鈕？

來源

2015-09-23 Ronny Linsener

您不能在CSS中向上/向後引用DOM。 –

在這個頁面http://fabiademo6.magikcommerce.com/index.php?route=common/home ist的作品，但我不能理清這個提及的CSS –

它可能是用Javascript完成的。 –

你只能爲第三個按鈕「add_compare」，因爲它是「add_cart」按鈕，使用這樣的「後」（假設你給他們ID add_cart和add_compare）實現這一點：

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

但就我所知，第一個按鈕不能用純CSS完成。你需要爲此使用Javascript。

來源

2015-09-23 19:27:25 mustafa1993

當懸停在按鈕1上顯示按鈕2

回答

相關問題