为什么 :hover 在 Webkit 浏览器中不能与相邻同级选择器一起正常工作？

Linda Hamilton

发布： 2024-10-24 02:42:29

原创

1089 人浏览过

Why Doesn't :hover Work Properly with Adjacent-Sibling Selectors in Webkit Browsers?

具有多个相邻兄弟选择器的 Webkit 错误

在 Webkit 浏览器（Safari、Chrome）中，使用 :hover 伪值时会出现问题-具有多个相邻兄弟选择器的类。以下代码说明了该问题：

div:hover + a + div {}

登录后复制

将鼠标悬停在

上时元素，样式未正确应用。但是，如果将鼠标悬停在上，首先是

添加通用同级选择器，如：

div:hover ~ div {}

无论是否声明样式，都会解析问题。

此 Webkit 错误的解决方法是在 body 元素上伪造动画：

body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}

可以在此处查看实际效果：https://jsfiddle.net/jalbertbowdenii/ ds2yY/1/.

以上是为什么 :hover 在 Webkit 浏览器中不能与相邻同级选择器一起正常工作？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章