鼠标悬停(hover)一个元素改变另一个元素样式的实现

2020-09-24T15:08:00

需求说明

需要在鼠标悬停(hover)在一个元素上时,显示隐藏的 div。
使用场景:PC 端 hover 一个按钮,展示隐藏的二维码,如微信公众号,App 下载等。

实现过程

当然可以直接用 jQuery 的 hover() 事件,直接绑定或者使用 onmouseoveronmouseout 绑定回调函数。然后在回调函数中隐藏或显示目标元素。

CSS 也有这样一种用法,a:hover b {},但我在使用过程中经常会遇到无法触发的情况。之前不太明白,为什么有的时候可以,有的时候不可以,菜鸟教程和 w3cschool 也没有具体使用 demo 和规则说明。今天搜索相关教程,才了解到 CSS 中 hover 的几个使用场景:

  • 作用于自身,改变自己的样式

这是最常见的使用场景,形如:a:hover{}

  • 作用于子元素,改变其样式

hover 元素与目标元素是父子关系(上下层级关系),形如:a:hover b,b 包含于 a。

  • 作用于兄弟元素或者兄弟元素的子元素,改变其样式

这扩大 hover 可使用的场景,但使用限制还是非常大。说是兄弟元素,但事实上只能作用于弟元素或者弟元素的子元素,且两者之间不能相隔其他任意的标签元素(纯文本除外)。

形如:a:hover +b 或者 a:hover +b[>]c,b 紧挨着 a。

经测试,除以上三种场景外,其他情况 hover 都无法修改目标元素的样式。

综上,要么使用 js(jQuery)脚本绑定 hover 事件,然后在回调里修改目标元素样式(使用 css()show()hide() 等方法),要么就将目标元素紧挨着 hover 元素放置(满足以上三种场景之一),css 设置 hover 状态下目标元素的样式。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »