添加了一个没有应用悬停伪元素版本的类

Added class with a hover pseudo element version not being applied

本文关键字：悬停 应用 元素 版本 一个 添加      更新时间：2023-09-26

我在这里有一个酒吧-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;
        }
    })
});

'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>

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

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

您的jQuery代码正在按预期工作，只是css没有达到应有的效果。

相关文章：