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

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

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

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

在这里插入图片描述

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

  1. <h2>
  2.   <a href="#">
  3.     Using The New Constrained Layout In WordPress Block Themes
  4.   </a>
  5. </h2>
  7. h2 {
  8.      color: #111; font-size: 32px; line-height: 1.1; }
  9. h2 a {
  10.      color: inherit; text-decoration: none; }
  11. h2:hover {
  12.      opacity: .6; }

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

在这里插入图片描述

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

在这里插入图片描述

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

谢谢你看到这里?

发表评论

表情：
评论列表 （有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

    相关 移除jQuery中的CSS Hover效果

    CSS的:hover伪类是用来在鼠标悬停在元素上时应用样式的。然而，有时候我们希望移除这个效果，即当鼠标悬停在元素上时不应用样式。在jQuery中，我们可以使用一些方法来实现这

    秒速五厘米秒速五厘米/ 0 赞/ 198 阅读