需求说明

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

实现过程

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

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 状态下目标元素的样式。