CODEWITHSUNDEEP
jqueryhtmlcss
Qwiso
Qwiso

Reputation: 135

CSS trick to manage border colors

What I'm trying to do should be simple but I don't know of any tricks or methods to accomplish it.

I have an element on my page. A 100x100 div with a class of 'fooditem'
When you hover, it gets a blue border
When you click, it gets a permanent green border

The issue is :hover and the base clases are competing. I want :hover to only apply to elements without the .fooditem-selected class.

Here's a fiddle to play with it. It works pretty much how I want, but I know I'm using conflicting css rules: http://jsfiddle.net/96BHd/2/

Is there a simple fix or trick that I am overlooking?

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

Upvotes: 0

Views: 147

Answers (4)

Jason
Jason

Reputation: 4149

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

Simplified CSS and Javascript. Uses :not() to prevent superfluous classes. You really don't need vendor prefixes on box-shadow (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;
}

Upvotes: 3

Shauna
Shauna

Reputation: 9596

Depending on the browser support you're looking for, you can use the :not() pseudo selector. It's a CSS3 selector, so caniuse.com says it should work on IE9+ and all non-IE browsers. If you need more support, you might get it with a selector shim.

To use it:

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

Upvotes: 1

yancie
yancie

Reputation: 306

Add a nonActive class to the div, and change fooditem:hover to fooditem-nonActive:hover, than in the js , remove the fooditem-nonActive class , add the fooditem-selected class :

Add a nonActive class to the div:

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

change the hover in 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");
    }
});

A working demo: http://jsfiddle.net/96BHd/5/

btw I love those boxes, they are so cute :D

Upvotes: 0

Erik Philips
Erik Philips

Reputation: 54618

There is nothing particularly wrong with the way you have it and I wouldn't even consider it a hack, as you're using basic CSS. However I am a fan of having negative states.

.fooditem{
}

.fooditem-notselected {
}

.fooditem-notselected:hover {
}

.fooditem-selected {
}

And using toggleClass():

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

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

These styles are a bit more descriptive so it should be easier to understand, especially for someone who is looking at your code for the first time.

Upvotes: 0

Related Questions