Добавлен класс с псевдоэлементной версией hover

Question

У меня есть бар здесь - http://jsfiddle.net/3pxnjocp/4/ - он получает изображение, когда перекатывается. Когда щелкает маленькую коробку, я хочу изменить планку, чтобы она стала красной и осталась красной, когда она перевернулась. Кто-нибудь видит, почему код, который у меня есть, не делает этого? Щелчок в блоке добавляет класс в панель с псевдо-элементной версией hover, который даже имеет !important, но вместо этого выбирается оригинальный стиль наведения с фоном изображения.

Спасибо.

$(function(){ 
    var flag=false; 
    $('#flag').click(function() { 
     if(!flag) { 
      $('#flag').css('background-color', 'red'); 
      $('#box').addClass('alwaysRed'); 
      flag = true; 
     } 
     else { 
      $('#flag').css('background-color', 'white'); 
      $('#box').removeClass('alwaysRed'); 
      flag=false; 
     } 
    }) 
}); 

Answer 1

'none' не следует указывать в background-image.

#box.alwaysRed:hover { 
    background-image: none;  // no !important required 
} 

это все, что нужно:

var flag=false; 
 

 
$('#flag').click(function() { 
 
    if(!flag) { 
 
    $('#flag').css('background-color', 'red'); 
 
    $('#box').addClass('alwaysRed'); 
 
    flag = true; 
 
    } 
 
    else { 
 
    $('#flag').css('background-color', 'white'); 
 
    $('#box').removeClass('alwaysRed'); 
 
    flag=false; 
 
    } 
 
}) 
 

#box { 
 
    width:100px; 
 
    height:26px; 
 
    border:1px solid black; 
 
    float:left; 
 
} 
 
#box:hover{ 
 
    background-image: url('http://s3.postimg.org/wkct91733/bar_Background.png'); 
 
} 
 
#flag { 
 
    width:26px; 
 
    height:26px; 
 
    border:1px solid black; 
 
    float:left; 
 
    margin-left:30px; 
 
} 
 
#box.alwaysRed { 
 
    background-color:red; 
 
} 
 

 
#box.alwaysRed:hover { 
 
    background-image: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box"></div> 
 
<div id="flag"></div>

Answer 2

Здесь вы рабочий раствор, http://jsfiddle.net/3pxnjocp/5/

#box.alwaysRed { 
    background:red !important; 
} 

Ваш код JQuery работает, как задумано, только ваш CSS не так, как должно быть.