dont apply css style if element has a specific class

Question

I have an ordered list:

<ol id="selectable">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ol>

when I hover over an item I want it to have some sort of highlight therefore I have:

     #selectable li:hover
 {
        /* some style */
     }

with JavaScript I gave those list items the attribute that when clicked they change the style. so if I click on Item 4 for example it will have a red background color.

now how can I disable the hover style if the element happens to be with the style ckicked (red background)?

In other words I don't want :

     #selectable li:hover
 {
        /* some style */
     }

to apply on li that are selected... how can I do that?

Tim B James · Accepted Answer · 2011-10-12 15:57:32Z

2

You will need to override the hover style

#selectable li.selectedclass:hover{
    /* overriding styles */
}

answered Oct 12, 2011 at 15:57

Tim B James

20.4k4 gold badges77 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Spudley · Accepted Answer · 2011-10-12 16:03:16Z

2

The real CSS3 answer to this is the :not() selector.

You'd change your existing CSS to the following:

#selectable li:hover:not(#selecteditem)
{
  /* some style */
}

Unfortunately however, this answer is probably not the one you want, because IE8 and earlier don't support the :not() selector.

You could use a tool like Selectivizr to add support for this to IE, but frankly, it's hardly worth it for this example, as you can easily add another CSS style to override the other one:

#selectable li#selecteditem:hover
{
    /* override styles */
}

Hope that helps.

answered Oct 12, 2011 at 16:03

Spudley

169k39 gold badges240 silver badges309 bronze badges

Comments

Rich · Accepted Answer · 2011-10-12 16:05:15Z

2

CSS3:

#selectable li:hover:not(.selected) {
 background:red;

}

HTML:

<ol id="selectable">
  <li>Item 1</li>
  <li class="selected">Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

answered Oct 12, 2011 at 16:05

Rich

4266 silver badges12 bronze badges

Collectives™ on Stack Overflow

dont apply css style if element has a specific class

now how can I disable the hover style if the element happens to be with the style ckicked (red background)?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

now how can I disable the hover style if the element happens to be with the style ckicked (red background)?

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related