管理边框颜色的CSS技巧

Question

我想做的事情应该很简单，但我不知道有什么技巧或方法来完成它。

我的页面上有一个元素。带有一类“食品”的100x100除尘器

当你悬停时，它会得到蓝色的边框。

当您单击时，它将得到一个永久的绿色边框。

问题是:悬停和基本类别正在竞争。我希望:悬停只应用于元素，而不使用..fooditem-选择的类。

这是一个用来玩的小提琴。这基本上是我想要的，但我知道我使用的是相互冲突的css规则：http://jsfiddle.net/96BHd/2/

有一个简单的修复或欺骗，我忽略了吗？

CSS

.fooditem {
    width: 100px;
    height: 100px;
    border: 1px solid grey;
}

.fooditem:hover {
    transition: .5s;
    box-shadow: inset 0 0 0 6px #4F91FF;
}

.fooditem-selected {
    transition: .5s;
    box-shadow: inset 0 0 0 6px #6dff70;
}

.fooditem-selected:hover {
    box-shadow: inset 0 0 0 6px #6dff70;
}

JS

$(".fooditem").click(function(){
    if($(this).hasClass("fooditem-selected")){
        $(this).removeClass("fooditem-selected");
    } else {
        $(this).addClass("fooditem-selected");
    }
});

Answer 1

http://jsfiddle.net/96BHd/7/

简化CSS和Javascript。使用:not()来防止多余的类。你真的不需要供应商在盒子阴影(http://css-tricks.com/do-we-need-box-shadow-prefixes/)上加上前缀。

JS

$(".fooditem").click(function () {
 $(this).toggleClass("selected");
});

CSS

.fooditem{
    width: 100px;
    height: 100px;
    border: 1px solid grey;
    float:left;
    -webkit-transition: .2s;
    transition: .5s;
}
.fooditem:not(.selected):hover {
    box-shadow:inset 0px 0px 0px 6px #4F91FF;
}
.fooditem.selected {
    box-shadow:inset 0px 0px 0px 6px #6dff70;
}

Answer 2

根据您要寻找的浏览器支持，您可以使用:not()伪选择器。这是一个CSS3选择器，所以caniuse.com说它应该在IE9+和所有非IE浏览器上工作。如果您需要更多的支持，您可能会得到它的选择器垫片。

使用它：

.fooditem:not(.fooditem-selected):hover

Answer 3

你拥有它的方式没有什么特别的问题，我甚至不会认为它是一个黑客，因为你使用的是基本的CSS。然而，我是一个有消极状态的球迷。

.fooditem{
}

.fooditem-notselected {
}

.fooditem-notselected:hover {
}

.fooditem-selected {
}

并使用toggleClass()

$(".fooditem").click(function(){
  $(this).toggleClass("fooditem-notselected")
    .toggleClass("fooditem-selected");

  // or .toggleClass("fooditem-notselected fooditem-selected");
});

这些样式更具描述性，因此应该更容易理解，特别是对于第一次查看您的代码的人。