Question

我这里有一个酒吧 - http://jsfiddle.net/3pxnjocp/4/ - 在翻身时获得图片背景。单击小方框时，我想将条形更改为红色并在翻转时保持红色。有谁知道为什么我的代码没有这样做？单击框会在栏中添加一个带有悬停伪元素版本的类，该版本甚至具有!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
}

是所有需要的：

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

这是一个有效的解决方案http://jsfiddle.net/3pxnjocp/5/

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

你的jQuery代码按预期工作，只是你的css不是应该的。

添加了未应用悬停伪元素版本的类

2 个答案: