[已解决]为什么鼠标移动到购物车后”商品还没有，赶紧选购”这句话没有出现

giegie666

<ul class="black-top-right">
            <li><a href="#">登录</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li><a href="#">消息通知</a><span>|</span></li>
            <li class="cars">
                <a href="#">
                    <i class="iconfont"></i>
                    <i class="iconfont">&#xe607;</i>

                    </i>购物车(0)</i>
                </a>
            <div class="cars-list">
                商品还没有，赶紧选购
            </div>
            </li>
        </ul>






.cars-list{
    width: 316px;
    height: 0px;
     background: #333;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    position: absolute;
    right: 0px;
    top: 40px;
    color: #424242;
    overflow: hidden;
    line-height: 100px;
}
.cars:hover>.cat-list{
    height: 100px;
}

最佳答案

月排行榜 / 总排行榜

FishC

2024-1-3 21:25:23

giegie666 发表于 2024-01-03 21:25
刚发完就看见了

很抱歉，可能是我回复得比较慢。那么问题解决了吗？如果您仍然遇到问题，可以提供更多的代码或详细的描述，我将尽力帮助您解决问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

根据您所提供的代码，可能是因为CSS选择器中的类名不匹配导致元素无法显示。在HTML代码中，购物车的父元素（class为cars）没有包含子元素（class为cat-list），所以当鼠标移动到购物车上时，没有相关元素被显示出来。

您可以尝试修改CSS代码，将`.cars-list`更改为`.cat-list`，这样就能匹配到正确的元素，并且鼠标移动到购物车之后，"商品还没有，赶紧选购"这句话就会出现了。

修改后的CSS代码如下：

1. .cat-list{
   
2.     width: 316px;
   
3.     height: 0px;
   
4.     background: #333;
   
5.     box-shadow: 0 2px 10px rgba(0,0,0,0.15);
   
6.     position: absolute;
   
7.     right: 0px;
   
8.     top: 40px;
   
9.     color: #424242;
   
10.     overflow: hidden;
    
11.     line-height: 100px;
    
12. }
    
13. .cars:hover>.cat-list{
    
14.     height: 100px;
    
15. }

复制代码

同时，请确保在HTML代码中，购物车的父元素有class为`cars`。

希望以上解答对您有帮助！如果还有其他问题，请随时提问。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

歌者文明清理员

《cat-list》

giegie666

FishC 发表于 2024-1-3 19:45
根据您所提供的代码，可能是因为CSS选择器中的类名不匹配导致元素无法显示。在HTML代码中，购物车的父元素 ...

刚发完就看见了

FishC

giegie666 发表于 2024-01-03 21:25
刚发完就看见了

很抱歉，可能是我回复得比较慢。那么问题解决了吗？如果您仍然遇到问题，可以提供更多的代码或详细的描述，我将尽力帮助您解决问题。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。