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;显示元素,悬浮时设置