使用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

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

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