[分享]css中hover属性兼容性

CSS中的:hover属性是开发者很喜欢的一种伪类选择器。使用:hover属性可以让鼠标指针在元素上悬停时修改元素的样式。

 a:hover {
      color: red;
      text-decoration: underline;
  } 

但是，:hover属性在不同的浏览器中有时并不兼容。尤其是在IE6和IE7中，hover属性可能无法正常工作。

解决方法是使用JavaScript或jQuery编写代码。首先，检测浏览器是否支持: hover属性，如果不支持，则将类添加到该元素并在CSS中定义该类的样式。然后，使用JavaScript监视元素并添加或删除类。

 .myHoverStyle:hover {
      color: red;
      text-decoration: underline;
  }
  
  // 检查浏览器是否支持:hover属性 
  if (!('hover' in document.createElement('div').style)) {
      // 监视鼠标指针是否位于元素上 
      $('.myElement').hover(function() {
          $(this).addClass('myHoverStyle');
      }, function() {
          $(this).removeClass('myHoverStyle');
      });
  } 

上述代码可以检测浏览器是否支持:hover属性。如果该元素在不支持hover属性的浏览器上，代码将为该元素添加myHoverStyle类，该类在CSS中定义：在悬停时修改元素的颜色和文本装饰。使用jQuery的hover方法并添加/删除myHoverStyle类以更改元素的样式。

结论是，:hover属性在不同的浏览器中并不总是兼容的，可以使用JavaScript和jQuery编写代码来解决此问题。