giegie666 发表于 2024-1-3 19:45:31

为什么鼠标移动到购物车后”商品还没有,赶紧选购”这句话没有出现

<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 19:45:53

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

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

修改后的CSS代码如下:

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

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

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

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

歌者文明清理员 发表于 2024-1-3 20:04:49

《cat-list》

giegie666 发表于 2024-1-3 21:25:17

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

刚发完就看见了

FishC 发表于 2024-1-3 21:25:23

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

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

以上回复来自 FishC AI 小助理,如未能正确解答您的问题,请继续追问。
页: [1]
查看完整版本: 为什么鼠标移动到购物车后”商品还没有,赶紧选购”这句话没有出现