CSS-TRICKS 中标题 hover 看到的问题的注意

墨蓝 2024-05-24 03:13 55阅读 0赞

### `CSS-TRICKS` 中标题 `hover` 看到的问题的注意 ###

在看 `CSS-Tricks` 瞎看的时候, 鼠标无意中划过文章的标题, 看到了一个现象, 也不能说严重, 但是个人感觉没有的话体验会更好. (我是菜鸟?

![在这里插入图片描述][245fe3e2e50e4c1db10311a93d265a00.gif_pic_center]

问题就是当鼠标移动在标题移动, 标题的颜色在不停地变化. 我们看一下模拟的文档结构就知道怎么回事了

<h2>
      <a href="#">
        Using The New Constrained Layout In WordPress Block Themes
      </a>
    </h2>

h2 {
         color: #111; font-size: 32px; line-height: 1.1; }
    h2 a {
         color: inherit; text-decoration: none; }
    h2:hover {
         opacity: .6; }

问题就出现在 `line-height` 的值稍稍有点大, 如果我们鼠标?️选中标题的文字, 就能看到行与行之间是有很窄的上级节点的白色背景. 所以如果给 `<a>` 设置 `hover` 就有可能出现这个问题.

![在这里插入图片描述][706c3b723a9a49499b899ac32cbc645d.png_pic_center]

那你会说, 不给 `<a>` 而给 `<h2>` 设置不就好了? 没错可以给 `<h2>` 设置, 但是这样出现了另一个效果, 即便鼠标 `hover` 在了 `<h2>` 的空白区域而不是 `<a>` 上, `<a>` 的透明度也会改变, 就像下图. 这可能也不是开发者想要的效果

![在这里插入图片描述][535677686a364cd282b6db370ea2122e.gif_pic_center]

其实我们可以 `line-height` 设置为 `1`, 即减小行高就可以了, 但是文件行与行之间的间距就会变小. 目前我还找出更好的方法, 只能暂时做些取舍了.

谢谢你看到这里?

[245fe3e2e50e4c1db10311a93d265a00.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/a835e72fc1e6493fabc470d9dd19487b.gif
[706c3b723a9a49499b899ac32cbc645d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/9558de355ad848e3a8700bd19d2adda8.png
[535677686a364cd282b6db370ea2122e.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/24/90877717c2024fa6bc857c52d25e3423.gif