JQuery：悬停而不取消悬停

Question

我什至对 jQuery 在元素上放置悬停属性的愚蠢方式感到惊讶。 看一下这个示例 CSS：

div.test
{
   width: 20px;
   height: 20px;
   color: #000000;
   background: #FFFFFF;
}
div.test:hover
{
   color: #FFFFFF;
   background: #CC0000;
}

如果我们想将其转换为 jQuery，我们必须输入以下内容：

$('div.test').css({
   'width' : '20px',
   'height' : '20px',
   'color' : '#000000',
   'background' : '#FFFFFF'
});
$('div.test').hover(function() {
   $(this).css({
      'color' : '#FFFFFF',
      'background' : '#CC0000'
   });
}, function() {
   $(this).css({
      'color' : '#000000',
      'background' : '#FFFFFF'
   });
});

没有更好的方法来做到这一点吗？ 写明显的东西感觉很愚蠢。

先感谢您。

Answer 1

你处理这个问题的方式是错误的。 你可以像这样定义一个 CSS 类

.highlighted
{
   color: #FFFFFF;
   background: #CC0000;
}

$('div.test').hover(function() {
    $(this).addClass('highlighted');
}, function() {
    $(this).removeClass('highlighted');
});

Answer 2

你错误地认为 jQuery 试图取代 CSS。

jQuery 不会“添加悬停标记”，它只是为 JavaScript 的悬停事件提供处理程序（IIRC 它实际上是 mouseover/mouseout 的抽象）。 如果您想使用 JS 模拟 CSS 的悬停伪选择器，jQuery 会为您提供易于使用的事件处理程序绑定，让您轻松实现这一点。

Answer 3

另外，您也可以编写以下简单的插件来执行您想要的操作（自动取消悬停）：

$.fn.easyHover = function(cssProps){
   return this.each(function(){
       var $t = $(this);
       var oldProps = {};
       for(x in cssProps)
          oldProps[x] = $t.css(x);
       $t.hover(function(){
          $(this).css(cssProps);
       }, function(){
          $(this).css(oldProps);
       });
   }
}

然后您可以像这样使用它：

$('#elem').easyHover({color:'#000', background:'#ccc'});

但是 Praveen 的答案肯定是要走的路。

Answer 4

我想另一种方法如下：

// In you stylesheet, just define the default properties
div.test
{
   width: 20px;
   height: 20px;
}

然后，制作一个简单的对象包装器来保存您想要使用的属性

var hoverHelper = (function () {
   var styles = {
      hoverStyle: {
         'color' : '#FFFFFF',
         'background' : '#CC0000'
      },
      defaultStyle: {
         'color' : '#000000',
         'background' : '#FFFFFF'
      }
   };

   return {
      init: function (selector) {
         $(selector).hover(
            function () {
               $(this).css(styles.hoverStyle);
            },
            function () {
               $(this).css(styles.defaultStyle);
            }
         );
      }
   };
}());

hoverHelper.init('.hoverElementClass'); // Apply the hover functions
                                        // to all matching elements

。这样，至少您可以将样式定义保留在一个地方。