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');
});