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"]});

错误：

未捕获错误：语法错误，无法识别的表达式：unsupported pseudo：hover

为什么悬停会在这里造成问题？

Answer 1

：悬停不是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");
});

Answer 2

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

使用JQuery

2 个答案: