1
$('#list').find('li').click(function(){
   var x = $(this).attr('id');
   $('#list').find('li').css({'background':'rgb(42,43,44)'});
   $('#'+ x).css({'background':'rgb(204,51,51)'});
});

this works...

but after this doesn't work hover. what can I do to solve this problem?

HTML:

<ul id="list">
  <li id="prod_info">Product information</li>
  <li id="additional_info">Aditional information</li>
  <li id="reviews">Reviews</li>
  <li id="share">Share</li>
</ul>
--------

-- css:

#list li:hover
{
    background: rgb(204,51,51);
    cursor: pointer;
    transition:0.6s;
}

Any ideas?

2
  • try $("*#list > li") and remove the find
    – Lefsler
    Dec 14, 2013 at 20:06
  • #Dude, in opera, chrome, firefox #demonofnight, I'll try
    – PiraTa
    Dec 14, 2013 at 20:08

3 Answers 3

2

It's because inline styles take priority over your #list li:hover styles. Ideally all styling (background colours) should be done in CSS, you can use JS to add classes and allow CSS to take over.

Also remember to keep your transition in the regular style not :hover if you still want it to transition when it's fading out as well.

How about this:

DEMO

JS

$('#list li').click(function(){
    $('#list li').removeClass('active');
    $(this).addClass('active');
});

CSS

#list li {
    background:rgb(42,43,44);
    transition:background ease 0.6s;
}

#list li.active,
#list li:hover
{
    background: rgb(204,51,51);
    cursor: pointer;
}
2

As opposed to using !important, why not just fix the issue?

jsFiddle example

I rewrote the jQuery:

$('#list li').click(function () {
    $(this).addClass('highlighted').siblings().removeClass('highlighted').addClass('selected');
});

CSS:

.selected {
    background:rgb(42, 43, 44);
}
#list li:hover, .highlighted {
    background: rgb(204, 51, 51);
    cursor: pointer;
    transition:0.6s;
}
2

Because

#list li:hover
{
    background: rgb(204,51,51);

Will be overwritten by the style="" attribute that jQuery will give to the element after the click.

A possible solution you may want to consider is this

#list li:hover
{
    background: rgb(204,51,51) !important;

Add !important to the CSS background property on hover. It's usually discouraged so the developer will have to develop a better designed template. But in this particular case, it fits your needs

DEMO

UPDATE

Example working without important.

This is better.

$('#list').find('li').click(function(){
    var x = $(this).attr('id');
    $('#list').find('li').addClass('other');
    $('#'+ x).addClass('clicked');
});

As you can see I used addCass and now jQuery doesn't give the style attribute to the element so nothing is overwritten.

Of course, there's the new css too

#list li:hover, #list li.clicked
{
    background: rgb(204,51,51);
   cursor: pointer;
    transition:0.6s;
}

.other {
    background: rgb(42,43,44);
}
1
  • I suggested both !important way and a better jquery way explaining what i did and linking documentation. A vote down may only come from someone who just have red the first lines and I suggest to read the full post before judge. Dec 14, 2013 at 20:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.