Question

我想做的事情应该很简单，但我不知道有任何技巧或方法来实现它。

我的页面上有一个元素。 100x100 div，带有'fooditem'类当你悬停时，它会变成蓝色边框单击时，它将获得永久绿色边框

问题是：悬停和基础竞争是竞争。我想：悬停到仅适用于没有.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");
});

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

Answer 4

向div添加一个nonActive类，并将fooditem:hover更改为fooditem-nonActive:hover，而不是在js中删除fooditem-nonActive类，添加fooditem-selected类：

在div中添加一个nonActive类：

<div class='fooditem nonActive'></div>

在css中更改悬停：

.nonActive:hover {
    // style stays the same
    -webkit-transition: .2s;
    transition: .5s;
    -webkit-box-shadow:inset 0px 0px 0px 6px #4f91ff;
    -moz-box-shadow:inset 0px 0px 0px 6px #4F91FF;
    box-shadow:inset 0px 0px 0px 6px #4F91FF;
}

JavaScript的：

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

正在运行的演示： http://jsfiddle.net/96BHd/5/

是的，我喜欢那些盒子，它们很可爱：D

用于管理边框颜色的CSS技巧

4 个答案: