岳池发展建设集团有限公司门户网站,湛江seo咨询,天元建设集团有限公司六大板块,那个视频网站可以做gifcss实现鼠标悬停时元素的显示与隐藏
跟着B站黑马学习小兔鲜项目#xff0c;有个点记录一下
就是当鼠标悬浮在商品列表上时#xff0c;列表中的商品会显示出来#xff0c;离开时#xff0c;商品隐藏#xff0c;如下#xff1a; 感觉这个功能经常会遇到#xff0c;但一直…css实现鼠标悬停时元素的显示与隐藏
跟着B站黑马学习小兔鲜项目有个点记录一下
就是当鼠标悬浮在商品列表上时列表中的商品会显示出来离开时商品隐藏如下 感觉这个功能经常会遇到但一直没弄明白具体怎么实现的现在仔细学习了一下总算搞清楚了
先上代码
templatediv classhome-categoryul classmenuli v-foritem in categoryStore.categoryList :keyitem.idRouterLink to/{{ item.name }}/RouterLinkRouterLink to/ v-fori in item.children.slice(0, 2) :keyi.id{{ i.name }}/RouterLinkdiv classlayerh4分类推荐small根据您的购买或浏览记录推荐/small/h4ulli v-fori in item.goods :keyi.idRouterLink to/img :srci.picture altdiv classinfop classname ellipsis-2{{ i.name }}/pp classdesc ellipsis{{ i.desc }}/pp classpricei¥/i{{ i.price }}/p/div/RouterLink/li/ul/div/li/ul/div
/templatescript setup
import { useCategoryStore } from /stores/category;
// import { onMounted } from vueconst categoryStore useCategoryStore()
// onMounted(() console.log(categoryStore.categoryList))
/scriptstyle langscss 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;显示元素悬浮时设置
