使用 JQuery 添加 css 属性悬停

Question

当我尝试向此类添加 CSS 属性时遇到问题，它给了我一个错误

我的代码

$('.openerp .nav-pills > li.active a:hover, .openerp .nav-pills > li.active a:focus, .openerp a.list-group-item.active a:hover, .openerp a.list-group-item.active a:focus').css({'color': res["left_hover_font_color"],'background-color': res["left_hover_bg_color"]});

错误：

未捕获的错误：语法错误，无法识别的表达式：不支持的伪：悬停

为什么悬停在这里会导致问题？

Answer 1

JQuery 选择器与 css 选择器相似但不完全相同，如果您想定位诸如悬停或焦点之类的事件，您需要使用回调，例如：

$('.openerp .nav-pills > li.active a').hover(function() {
    $(this).css({'color': res["left_hover_font_color"],'background-color': res["left_hover_bg_color"]});
},function() {
    $(this).css({'color': "",'background-color': ""});
});

Answer 2

:hover 不是一个 DOM 元素，而是一个状态。 jquery的css()函数使用inline-css。 inline-css 不能应用于不存在的元素。 如果你想改变 :hover 类的效果，我会使用 .addClass() 添加一个类，例如 alternative-over 并使用 css 设置样式。

使用纯 jQuery 的方法也可以这样说：

$('a').on("hover", function(){
  $(this).css({your styles});
});

第三种选择是通过 jQuery 在 DOM 中的 <style> 标记之间添加 css，但我不推荐它，因为它会变得混乱。

编辑：我将按照您的要求尝试使用您的特定代码创建一个示例，但我现在盲目地这样做，不能保证它会立即工作。可能需要稍作调整

//Specify the parents
var obj = $('.openerp .nav-pills > li.active, .openerp .nav-pills > li.active, .openerp a.list-group-item.active, .openerp a.list-group-item.active');

//This makes it grab the "a" within the objects(parents) you've specified before
    $('a', obj).on("hover", function(){
//This is what happens when you enter the area with your mouse
      $(this).css({'color': res["left_hover_font_color"],'background-color': res["left_hover_bg_color"]});
    },
function(){
  //this is what happens when your mouse leaves the area (removes the :hover)
  $(this).attr("style", ""); //resets the inline-styling
});

^ 以上是纯jQuery方式。我自己会使用 css 来获得你想要的东西。添加和删​​除类，像这样；

//Specify the parents
var obj = $('.openerp .nav-pills > li.active, .openerp .nav-pills > li.active, .openerp a.list-group-item.active, .openerp a.list-group-item.active');

//This makes it grab the "a" within the objects(parents) you've specified before
    $('a', obj).on("hover", function(){
//This is what happens when you enter the area with your mouse
      $(this).addClass("alternative-hover");
    },
function(){
  //this is what happens when your mouse leaves the area (removes the :hover)
            $(this).removeClass("alternative-hover");
});