css实现鼠标悬停时元素的显示与隐藏

css实现鼠标悬停时元素的显示与隐藏

css实现鼠标悬停时元素的显示与隐藏

跟着B站黑马学习小兔鲜项目，有个点记录一下

就是当鼠标悬浮在商品列表上时，列表中的商品会显示出来，离开时，商品隐藏，如下：

感觉这个功能经常会遇到，但一直没弄明白具体怎么实现的，现在仔细学习了一下，总算搞清楚了

先上代码

<template><div class="home-category"><ul class="menu"><li v-for="item in categoryStore.categoryList" :key="item.id"><RouterLink to="/">{{ item.name }}</RouterLink><RouterLink to="/" v-for="i in item.children.slice(0, 2)" :key="i.id">{{ i.name }}</RouterLink><div class="layer"><h4>分类推荐<small>根据您的购买或浏览记录推荐</small></h4><ul><li v-for="i in item.goods" :key="i.id"><RouterLink to="/"><img :src="i.picture" alt=""><div class="info"><p class="name ellipsis-2">{{ i.name }}</p><p class="desc ellipsis">{{ i.desc }}</p><p class="price"><i>¥</i>{{ i.price }}</p></div></RouterLink></li></ul></div></li></ul></div>
</template><script setup>
import { useCategoryStore } from '@/stores/category';
// import { onMounted } from 'vue'const categoryStore = useCategoryStore()
// onMounted(() => console.log(categoryStore.categoryList))
</script><style lang="scss" scoped>
.home-category {width: 250px;height: 500px;background: rgba(0, 0, 0, 0.8);position: relative;z-index: 99;.menu {li {padding-left: 40px;height: 55px;line-height: 55px;&:hover {background: $xtxColor;}a {margin-right: 4px;color: #fff;&:first-child {font-size: 16px;}}.layer {width: 990px;height: 500px;background: rgba(255, 255, 255, 0.8);position: absolute;left: 250px;top: 0;display: none;padding: 0 15px;h4 {font-size: 20px;font-weight: normal;line-height: 80px;small {margin-left: 10px;font-size: 16px;color: #666;}}ul {display: flex;flex-wrap: wrap;li {width: 310px;height: 120px;margin-right: 15px;margin-bottom: 15px;border: 1px solid #eee;border-radius: 4px;background: #fff;&:nth-child(3n) {margin-right: 0;}a {display: flex;width: 100%;height: 100%;align-items: center;padding: 10px;&:hover {background: #e3f9f4;}img {width: 95px;height: 95px;}.info {padding-left: 10px;line-height: 24px;overflow: hidden;.name {font-size: 16px;color: #666;}.desc {color: #999;}.price {font-size: 22px;color: $priceColor;i {font-size: 16px;}}}}}}}// 关键样式  hover状态下的layer盒子变成block&:hover {.layer {display: block;}}}}
}
</style>

上面是完整代码，关键在于layer的样式

首先看正常情况下，鼠标未悬浮时layer的样式

.layer {width: 990px;height: 500px;background: rgba(255, 255, 255, 0.8);position: absolute;left: 250px;top: 0;display: none;padding: 0 15px;
}

display:none;实际上就是隐藏元素

再看看悬浮时layer的样式：

            // 关键样式  hover状态下的layer盒子变成block&:hover {.layer {display: block;}}

注意，悬浮是悬浮在layer的父元素也就是menu上，悬浮时，设置display:block；即可展示layer

总结一下：

• display: none;隐藏元素
• display:block;显示元素，悬浮时设置