Question

I have a menubar containing several menu items.

The menubar is a div containing the menu items (which are also divs) and inside of each menu item i have an href.

Here is the HTML:

<style>
.menubar-style {
    width: 100%; 
    background-color: white; 
    height: 20px; 
    text-align:center;
}
.menuitem-style {
    float: left; 
    width: 10%; 
    border-right: thin; 
    border-right-style:solid;
}
</style>
...
...
<div class="menubar-style">
    <div class="menuitem-style"><a href="#">Link 1</a></div>
    <div class="menuitem-style"><a href="#">Link 2</a></div>
    <div class="menuitem-style"><a href="#">Link 3</a></div>
</div>

What I want to do is change the background color of the menu item (the div, not just the href) when the cursor is over top of the link.

How can I capture the mouseover event from the link and use that to paint the background color of the entire menu item?

Better yet, is there a way to check if the mouse is over the entire menu item (the div not just the link)? That would be a better option because the menu item would change color with the mouse anywhere over the box not just the link.

Thanks in advanced!

Jan

Answer 1

you can simply add :hover selector to any predefined style to only apply it while the mouse is hovering over that particular object

.menuitem-style:hover {
    background-color: red;   // only changes to red if the mouse is hovering.
}