On this page you will see my page. I made have a menu. I wanted to make it more clear that this menu is a menu by highlighting the links on hover. While I normally would use JavaScript, jQuery sounded more simple to implement since it has .hover
. So to highlight the elements from the list, I added this script:
<script>
$("li").hover(
function(){
$(this).css("background-color", "#525252");
},
function() {
$(this).css("background-color", "#FFF");
}
);
</script>
In my understanding of jQuery, the first function embedded in the hover() function is run when the user is hovering over the li-element. The second function is run when the mouse leaves the li-element. jQuery API-link. The added script however doesn't seem to do anything at all.
My first try was to change the first line
$("li")
because this might not be the correct approach. This because it is a ul
li
so I tried ul
li
instead of just li
.
The second solution was to use addClass but to make another class sounded a bit redundant to me. So I decided to not use this.
Last I tried to add an alert to see if the code is ran at all on hover. This is the case. When I added an alert in the code and hovered over the li-element the alert was not triggered. So to my understanding the faulty code is only one line:
$("li").hover()
But I haven't found what exactly is faulty here.
The HTML code for the menu is the following:
<div id="menu">
<ul>
<li><strong><em><u>Main Menu</u></em></strong></li>
<li onclick="moveDiv('home');">Home</li>
<li onclick="moveDiv('profile')">Profile</li>
<li onclick="moveDiv('news')">News</li>
<li onclick="moveDiv('forums')">Forums</li>
<li onclick="moveDiv('webshop')">Web Shop</li>
<li onclick="moveDiv('status')">Status</li>
</ul>
</div>
CSS sheet:
#menu ul li {
list-style-type: none;
margin-top: 10px;
clear: left;
cursor: pointer;
}
#menu ul {
margin: 0px;
padding: 0px;
color: #525252;
}
#menu ul li a {
text-decoration: none;
color: #525252;
}
On this page you will see my page. I made have a menu. I wanted to make it more clear that this menu is a menu by highlighting the links on hover. While I normally would use JavaScript, jQuery sounded more simple to implement since it has .hover
. So to highlight the elements from the list, I added this script:
<script>
$("li").hover(
function(){
$(this).css("background-color", "#525252");
},
function() {
$(this).css("background-color", "#FFF");
}
);
</script>
In my understanding of jQuery, the first function embedded in the hover() function is run when the user is hovering over the li-element. The second function is run when the mouse leaves the li-element. jQuery API-link. The added script however doesn't seem to do anything at all.
My first try was to change the first line
$("li")
because this might not be the correct approach. This because it is a ul
li
so I tried ul
li
instead of just li
.
The second solution was to use addClass but to make another class sounded a bit redundant to me. So I decided to not use this.
Last I tried to add an alert to see if the code is ran at all on hover. This is the case. When I added an alert in the code and hovered over the li-element the alert was not triggered. So to my understanding the faulty code is only one line:
$("li").hover()
But I haven't found what exactly is faulty here.
The HTML code for the menu is the following:
<div id="menu">
<ul>
<li><strong><em><u>Main Menu</u></em></strong></li>
<li onclick="moveDiv('home');">Home</li>
<li onclick="moveDiv('profile')">Profile</li>
<li onclick="moveDiv('news')">News</li>
<li onclick="moveDiv('forums')">Forums</li>
<li onclick="moveDiv('webshop')">Web Shop</li>
<li onclick="moveDiv('status')">Status</li>
</ul>
</div>
CSS sheet:
#menu ul li {
list-style-type: none;
margin-top: 10px;
clear: left;
cursor: pointer;
}
#menu ul {
margin: 0px;
padding: 0px;
color: #525252;
}
#menu ul li a {
text-decoration: none;
color: #525252;
}
Share
Improve this question
edited Dec 14, 2013 at 14:04
Peter Mortensen
31.6k22 gold badges110 silver badges133 bronze badges
asked Jun 6, 2013 at 13:26
Random ProgrammerRandom Programmer
511 silver badge9 bronze badges
2
- post your css. so we can have a look. – Kees Sonnema Commented Jun 6, 2013 at 13:27
-
By the way, wrap all your jquery in
$(function() { YOUR CODE GOES HERE });
. Read more here. – David Sherret Commented Jun 6, 2013 at 13:29
5 Answers
Reset to default 6Use CSS instead:
li:hover {
background-color:#525252
}
Like others said, wait for the DOM to finish loading. You can put the script at the end of the page, or a more robust solution would be to wrap your code in $(document).ready()
function, like so:
$(document).ready(function () {
$("li").hover(function () {
$(this).css("background-color", "#525252");
}, function () {
$(this).css("background-color", "#FFF");
});
});
You don't need the overhead of something like jQuery for this. CSS has some behavioural features through it's pseudo classes: http://jsfiddle/T4aNf/
HTML
<ul id="menu">
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
CSS
#menu li a {
background: red;
}
#menu li a:hover {
background: green;
}
Wait for the DOM to be ready or put your script just before closing body tag:
(I checked your source code and, yes, this is your problem. You are setting it in head section.)
$(function () {
$("li").hover(
function () {
$(this).css("background-color", "#525252");
},
function () {
$(this).css("background-color", "#FFF");
});
});
You are calling your JavaScript code before the DOM finishes loading. Wrap your JavaScript like this:
<script>
$(function(){
$("li").hover(
function(){
$(this).css("background-color", "#525252");
},
function() {
$(this).css("background-color", "#FFF");
}
);
});
</script>
$()
is a shorthand for jQuery's ready function.