CSS悬停不工作，字体真棒。为什么？

Question

我很需要我的代码的建议和帮助。我想我的购物车元素时，购物车图标徘徊。这里是我的代码

.cart 
    {position: absolute;
    width: 35vw;
    height: 300px;
    background-color: lightblue;
    top: 0;
    right: 0;
    z-index: 99;
    opacity: 0;}
    
.cart-icon
    {display: block;
    width: 50px;
    background-color: yellow;
    height: 50px;
}
    
.cart-icon i {color:white}
.cart-icon i:hover ~ .cart {opacity:1}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart-icon">
<i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
</div>
    
<div class="cart">
<!--cart item-->
</div>

当我徘徊与CSS .cart i:hover {color:black}我元素，它也不能正常工作。我花2个多小时，以解决这个问题，但还是被卡住谢谢

Answer 1

你将不得不在:hover单独使用.cart-icon。目前你寻找那是.cart元素的兄弟姐妹i元素。

.cart 
    {position: absolute;
    width: 35vw;
    height: 300px;
    background-color: lightblue;
    top: 0;
    right: 0;
    z-index: 99;
    opacity: 0;}
    
.cart-icon
    {display: block;
    width: 50px;
    background-color: yellow;
    height: 50px;
}
    
.cart-icon i {color:white}
.cart-icon:hover ~ .cart {opacity:1}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart-icon">
<i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
</div>
    
<div class="cart">
<!--cart item-->
</div>

Answer 2

希望能够为您服务！

.cart 
{position: absolute;
width: 35vw;
height: 300px;
background-color: lightblue;
top: 0;
right: 0;
z-index: 99;
opacity: 0;}

.cart-icon
{display: block;
width: 50px;
background-color: yellow;
height: 50px;}

.cart-icon {color:white}
.cart-icon:hover ~ .cart {opacity:1}

Answer 3

有没有办法对CSS知道要素之间的联系，所以它更容易使物品孩子：

.cart-items {
  width: 35vw;
  height: 300px;
  background-color: lightblue;
  display: none;
}
    
.cart {
  width: 50px;
  background-color: yellow;
  height: 50px;
}
    
.cart i {color:white}

.cart:hover .cart-items {
  display: block;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart">
  <i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
  
  <div class="cart-items">
    cart items
  </div>
</div>