Javascript JQuery:悬停而不取消悬停

我甚至对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'
   });
});

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

没有更好的办法吗？写明显的东西感觉很愚蠢

---

提前谢谢你。

你走错了路。您可以这样定义一个CSS类

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

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

---

此外，您还可以编写以下简单插件来完成您想要的操作（自动取消覆盖）：

然后您可以这样使用它：

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

---

然而，Praveen的回答是辩护性的。

你错在认为jQuery试图取代CSS

---

jQuery并没有“添加悬停标记”，它只是为JavaScript的悬停事件提供处理程序（IIRC它实际上是

mouseover

/

mouseout

的抽象）。如果您想用JS模拟CSS的悬停伪选择器，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'
   });
});

// 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

---

这样，至少可以将样式定义保留在一个位置。

我现在只能使用JavaScript。这与您将样式属性放在CSS类中的情况完全相同。无论如何，谢谢。什么是“仅仅能够使用Javascript”呢？你的页面不能使用CSS吗？那是什么可笑的限制？你所要求的被接受的、正确的方式正是这里所描述的。在这种情况下，根本不需要直接使用CSS样式而不是类……他不是“将样式属性放在CSS类中”，而是将CSS放在样式表中，并操纵元素的类而不是样式。这叫做抽象，可以节省时间。朋友，我建议你在风格、行为和内容方面学习一些最佳做法。首先，请注意你的语气。你对你的问题不是很清楚，所以如果人们不跟随你，不要生气。其次，用JavaScript硬编码样式（样式和行为的分离，以及所有这些）是一个坏主意，因此建议使用一个类应用于悬停元素（有点像

：hover

伪选择器）。这样，您就可以将代码重新用于其他悬停效果，如果您想更改样式，您只有一个地方可以查看：您的样式表，它应该在哪里。@micmcg:对不起，您不明白的是什么？我已经告诉过你我完全用JS制作模块的原因。我在网站上工作了五年，我知道这不是一种“正确”的方式，但在这种情况下，这似乎是最好的方式，我认为使用JS来设计一些由JS组成的东西来优化加载时间和结构没有问题。关于我的“态度”，你似乎无法处理一个挑剔的人。我没有生气，我只是在争论。如果你能仔细阅读我的文章，那就继续吧，但请停止这些“态度”攻击。让我们回到主题上来，好吗？我对jQuery并不陌生，我知道它的工作方式。我的意思是，除了这一点之外，jQuery在所有方面都非常聪明。@lvarska：有很多人试图在实践和概念上帮助你，但你仍然感到愤怒。这是怎么回事？@Chris:是的，感觉你们低估了我，认为我很笨，这让我很恼火，因为我多次试图解释我的真正意思。不管怎样，我真的很感谢你的时间。jQuery不是CSS。jQuery允许动态应用CSS，仅此而已。如果您在jQuery中使用

：hover

伪选择器，那么您将获得在该时刻受CSS规则影响的相同元素。浏览器所做的是在每次更改DOM树时检查DOM树，以根据样式表更新样式。如果jQuery这样做，它将在浏览器中模拟浏览器。很容易看出为什么这是个坏主意。因此，它只为您提供了绑定事件处理程序的真正易于使用的快捷方式。很公平，不是吗？@Alan:谢谢，我早就知道了，不幸的是我认为这是离题的。请停止尝试，徒劳地解释jQuery是什么和做什么。我的问题是如何在第一篇文章中简化我的代码。如果我的观点不够清楚，请阅读我的其他帖子。谢谢。这更像是我要找的，但似乎不起作用？我看看我能做些什么。非常感谢。