Reputation: 64276
I have a menu and jquery-code, which makes its background-image different when hover.
$('#menu a').hover(function() {
$(this).css( 'background', 'url(images/slider_bg_hover.png) repeat-x' );
},function(){
$(this).css( 'background', 'url(images/slider_bg.png) repeat-x' );
});
It works fine, but now I want to highlight clicked menu:
$('#menu a').click(function() {
$(this).css( 'background', 'url(images/slider_bg_hover.png) repeat-x' );
});
It works fine too, but after clicking I move my mouse-pointer from menu-area and hover-action calls! So that part of menu is unhiglighted!
What can u advice me?
Upvotes: 0
Views: 947
Reputation: 3800
You could also consider putting an !important after the css rule for selected, so it would ovverride the hover rule. (Using the above solution).
Upvotes: 1
Reputation: 4460
Rather than setting individual css attributes, consider using classes instead.
Your example would require three css classes (two of which have the same definition)
.menu{
background: url(images/slider_bg.png) repeat-x;
}
.hoverMenu, .selectedMenu{
background: url(images/slider_bg_hover.png) repeat-x;
}
$('#menu a').hover(function() {
$(this).addClass('menu');
},function(){
$(this).addClass( 'hoverMenu' );
});
$('#menu a').click(function() {
$('#menu a').removeClass( 'selectedMenu' );
$(this).addClass('selectedMenu');
});
When an element has two classes that conflict with each other, I think that the one which comes last, in the CSS definitions, is the one that takes effect. It's a bit late at night for me to check this, but you can swap the classes around to see which way works best..
Upvotes: 2