Hi I have this code in my CSS file
.topnav > li:hover:not(.active) > a {
background: #3e3e3e;
}
I want to achieve this with javascript . Could someone please help me with this thing, with some explanation ?
Add a comment
|
2 Answers
Assuming you're talking about a straight conversion to javascript, you could do the following (in jQuery);
$("li").not("active").children("a").hover(function(){
$(this).css({'background' : '#3e3e3e'});
}, function(){
$(this).css({'background' : 'youroldcolor'});
});
This works exactly like your css selector, looking first at the li's, ignoring the ones with an active class, then selecting the 'a' children. The use of (this) refers to the targetted element.
Edit
Updated to fix code problems.
2 Comments
mayank
Thanks for your reply ......Its working but not properly its changing the color of li permanently,i want it to work on mouseover ,can you tell me about doing it on just mouse over buddy ....
Someone
Hi, yeah, sorry I forgot about the mouseout event. Add that to the end of it, and change the 'youroldcolor' part to your actual original color. That should fix it :) See my edited answer.
Your HTML
<ul class="topnav">
<li onmouseover="StartHover()" onmouseout="OutHover()">aaaaaa</li>
</ul>
Your Javascript
<script>
function StartHover() {
$(".topnav li").css("background", "#3e3e3e");
}
function OutHover() {
$(".topnav li").css("background", "White");
}
</script>
1 Comment
Mohammed Alasa'ad
If you need the color stay #3e3e3e just remove function OutHover() { $(".topnav li").css("background", "White"); }