javascript blocks css code

Question

<p class='sent' id='abc'>abc</p>
<p class='sent' id='abb'>abb</p>
<p class='sent' id='acc'>acc</p>

css

.sent:hover{
background-color:#e1e1e1;  // works until the first click on .sent
}

js

$(".sent").click(function() {
$('.sent').css('background-color', 'transparent'); //works
$(this).css('background-color', '#e1e1e1');  //works
});

After first click on sent css sent:hover doesnt work !?

Because you've set the default colour to be the hover colour, so obviously there will be no visual change. — ediblecode
– ediblecode, Commented Oct 15, 2013 at 8:54
@danrhul I think there's multiple .sent elements, so he wants the current chosen or the hovering element to have colour #e1e1e1. — h2ooooooo
– h2ooooooo, Commented Oct 15, 2013 at 8:55

Frédéric Hamidi · Accepted Answer · 2013-10-15 08:54:41Z

2

Inline styles have precedence over rules defined in style blocks.

Try removing the background-color style instead of setting it to transparent:

$(".sent").click(function() {
    $(".sent").css("background-color", "");
    $(this).css("background-color", "#e1e1e1");
});

answered Oct 15, 2013 at 8:54

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

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

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-10-15 08:55:22Z

2

Try .one()

<p class='sent' id='abc'>abc</p>
<p class='sent' id='abb'>abb</p>
<p class='sent' id='acc'>acc</p>

js

$('.sent').one( 'click',function(){
    $(this).addClass('sent_clicked');  
});

or

$('.sent').one( 'click',function(){
    $('.sent').addClass('sent_clicked');  
});

css

.sent_clicked:hover{
background-color:#e1e1e1; 
}

answered Oct 15, 2013 at 8:55

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

1 Comment

h2ooooooo Over a year ago

This will not unset other .sent elements which seems to be what OP wants.

Lloyd Banks · Accepted Answer · 2013-10-15 08:54:52Z

1

Comment out

$('.sent').css('background-color', 'transparent');

answered Oct 15, 2013 at 8:54

Lloyd Banks

36.9k58 gold badges172 silver badges264 bronze badges

Comments

Lidor · Accepted Answer · 2013-10-15 11:26:08Z

0

Adding !important to your CSS would do the trick.

.sent:hover{
background-color:#e1e1e1 !important;
}

This is a quick and easy fix. You should avoid using !important in your CSS.

edited Oct 15, 2013 at 11:26

answered Oct 15, 2013 at 8:57

Lidor

3949 silver badges16 bronze badges

1 Comment

ediblecode Over a year ago

Whilst this would work, it is inherently bad practice. If you feel the need to use !important it usually means your CSS is bad.

Collectives™ on Stack Overflow

javascript blocks css code

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related