CSS trick to manage border colors

Question

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

Note: I had to add .fooditem-selected:hover because the base class (.fooditem:hover) was still applying the blue border after the item was selected. That is the 'hack' I am looking to fix — Qwiso
– Qwiso, Commented Jun 3, 2014 at 19:31
Your fiddle works fine for me in Chrome, green border stays green jsfiddle.net/96BHd/2 — Andrew
– Andrew, Commented Jun 3, 2014 at 19:32
I am not seeing any problem in Firefox. The only thing I saw that might be a problem is if you intended selected items to have a different hover color... the css has it use the same border color in the hover class that it already has from the -selected on. jsfiddle.net/96BHd/3 -- using a different color for -selected hover. — Chris Baker
– Chris Baker, Commented Jun 3, 2014 at 19:33
@Andrew - It works how I want but I know it's hacked. I was wondering if there is a better way to accomplish the same result. — Qwiso
– Qwiso, Commented Jun 3, 2014 at 19:35

Jason · Accepted Answer · 2014-06-03 22:18:05Z

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

Shauna · Accepted Answer · 2014-06-03 22:14:51Z

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

Erik Philips · Accepted Answer · 2014-06-03 22:04:19Z

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.

yancie · Accepted Answer · 2014-06-03 22:08:25Z

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

Instead of using a "nonActive" state, cluttering the divs with a bunch of classes, why don't you use the psuedo CSS selector :not()? It works in all modern(ish) browsers. css-tricks.com/almanac/selectors/n/not

Collectives™ on Stack Overflow

CSS trick to manage border colors

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Related