CSS悬停不适用于字体。为什么？

我需要一个建议和帮助在我的代码。我想在购物车图标悬停时显示购物车元素。这是我的密码

.cart
{位置：绝对位置；
宽度：35vw；
高度：300px；
背景颜色：浅蓝色；
排名：0；
右：0；
z指数：99；
不透明度：0；}
.购物车图标
{显示：块；
宽度：50px；
背景颜色：黄色；
高度：50px；
}
.cart图标i{颜色：白色}
.cart图标i:hover~.cart{opacity:1}

---

您必须使用

：将
悬停在
上。购物车图标本身。当前您正在查找
.cart
元素，该元素是
i
元素的同级元素


.cart
{位置：绝对位置；
宽度：35vw；
高度：300px；
背景颜色：浅蓝色；
排名：0；
右：0；
z指数：99；
不透明度：0；}
.购物车图标
{显示：块；
宽度：50px；
背景颜色：黄色；
高度：50px；
}
.cart图标i{颜色：白色}
.cart图标：悬停~.cart{opacity:1}

CSS无法知道元素之间的链接，因此更容易将项目作为子项：


。购物车项目{
宽度：35vw；
高度：300px；
背景颜色：浅蓝色；
显示：无；
}
.购物车{
宽度：50px；
背景颜色：黄色；
高度：50px；
}
.cart i{颜色：白色}
.cart：悬停.cart项目{
显示：块；
}

购物车项目
希望这对您有用

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

CSS无法知道
.cart图标
链接到
.cart
，因此无法正常工作，如何在悬停
.cart图标
或
时显示
.cart
？CSS绝对有办法知道元素之间的链接。和