(纯CSS)悬浮一个元素，让另一个元素改变属性

如下图，我要在鼠标悬浮列表时，出现右边的详细商品块

<div class="w carousel"><div class="carousel-switcher"><div class="switcher-dot switcher-dot-normal"></div><div class="switcher-dot switcher-dot-normal"></div><div class="switcher-dot switcher-dot-normal"></div><div class="switcher-dot switcher-dot-active"></div></div><ul><li>手机 电话卡<span>&gt;</span></li><li>电视 盒子<span>&gt;</span></li><li>笔记本 显示器<span>&gt;</span></li><li>家电 插线板<span>&gt;</span></li><li>出行 穿戴<span>&gt;</span></li><li>智能 路由器<span>&gt;</span></li><li>电源 配件<span>&gt;</span></li><li>健康 儿童<span>&gt;</span></li><li>耳机 音箱<span>&gt;</span></li><li>生活 箱包<span>&gt;</span></li></ul><div class="detail-goods-type"><div class="goods-grid"><img src="data:images/cp1.webp" alt="图片未找到" />RedmiBook Pro 14 锐龙版</div><div class="goods-grid"><img src="data:images/cp2.webp" alt="图片未找到" />RedmiBook Pro 15</div><div class="goods-grid"><img src="data:images/cp3.webp" alt="图片未找到" />小米/Redmi 显示器</div><div class="goods-grid"><img src="data:images/cp4.webp" alt="图片未找到" />RedmiBook Pro 15 锐龙版</div><div class="goods-grid"><img src="data:images/cp5.webp" alt="图片未找到" />Redmi G 游戏本</div><div class="goods-grid"><img src="data:images/cp6.webp" alt="图片未找到" />键鼠套装</div><div class="goods-grid"><img src="data:images/cp7.webp" alt="图片未找到" />小米笔记本 Pro 15 锐龙版</div><div class="goods-grid"><img src="data:images/cp8.webp" alt="图片未找到" />RedmiBok Air 13</div><div class="goods-grid"><img src="data:images/cp9.png" alt="图片未找到" />鼠标</div><div class="goods-grid"><img src="data:images/cp10.webp" alt="图片未找到" />小米笔记本 Pro 15</div><div class="goods-grid"><img src="data:images/cp11.webp" alt="图片未找到" />小米笔记本 Pro 16</div><div class="goods-grid"><img src="data:images/cp12.webp" alt="图片未找到" />小米笔记本 Pro 14</div><div class="goods-grid"><img src="data:images/cp13.webp" alt="图片未找到" />小米笔记本 Pro 15.6</div></div></div>

.detail-goods-type {float: left;width: 774px;height: 458px;background-color: white;border: 1px solid #B0B0B0;visibility: hidden;
}.goods-grid {float: left;width: 256px;height: 76px;line-height: 76px;font-size: 14px;color: #333333;cursor: pointer;
}.goods-grid:hover {color: #FFA500;
}.goods-grid img {vertical-align: middle;margin: 0 10px;
}.carousel ul:hover~
.detail-goods-type {visibility: visible;
}

初始设置详细商品块的visibility为hidden，在鼠标悬浮列表时，使用兄弟选择器让详细商品块的visibility为visible，其实是悬浮li时才会出现，后面再改吧。

(纯CSS)悬浮一个元素，让另一个元素改变属性相关推荐

美观又实用，纯 CSS 悬浮菜单让网站更加出色
前言平时我们在浏览网页时,如下图的导航栏已经屡见不鲜了,当鼠标放上去时,右侧隐藏的内容就会慢慢平滑展开,非常美观且实用,那你知道这种效果是怎么实现的吗?下面我们就一起实践一下. 如图所示: 实现思路 ...
前端每日实战：114# 视频演示如何用纯 CSS 和混色模式创作一个 loader 动画
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqYroW 可交互视频此视频是可 ...
纯css锚点跳转过渡效果 - 神奇的scroll-behavior属性
我们在浏览网站时,经常会看到返回顶部和楼层跳转的效果,但是这些大部分都是通过js来实现的.那么不用js也可以实现吗?答案是可以的. ok,先上代码,下面再进行了解! html: <!DOCTYP ...
html如何自定义一个动画效果,30个纯css动画代码片段和效果演示
开源代码已经迎来了一个新的web前端时代.初学者和专家都可以通过使用预构建的代码片段节省时间和压力.下面画廊由30个不同的片段与纯CSS创建动画效果. 所有这些代码片段都放在云IDE平台.这些weba ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
微信小程序纯css实现刻度尺
微信小程序纯css实现刻度尺最近需要实现一个高度定制的刻度尺,但是网上现成的方案却是极少,最终找到了HaoTian的wx-scale.但是没有实现竖向的效果而且刻度范围大时,在安卓机上无法渲染完全( ...
一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
借助checkbox表单元素.:checked伪类.::before/::after伪元素,就可以只需一个input[type="checkbox"]元素,通过纯CSS实现Swit ...

(纯CSS)悬浮一个元素，让另一个元素改变属性

(纯CSS)悬浮一个元素，让另一个元素改变属性相关推荐

最新文章

热门文章