Jump to content

CSS & :hover


sepoto

Recommended Posts

In the code my intent is to monitor the hover event of my div's through CSS for all div's belonging to the class "mainmenu". I put what I thought would work into the <style></style> tags but it does not have the desired effect in fact my CSS has no effect at all. I was wondering if anyone might know what I have done wrong? I have been testing it in IE as that is always the first browser I test in when I have new code. Once the code is working I tend to take the styles out of the inline form they are in and transfer them to a style sheet.

<html><head><title>Brownfield Subslab</title><style>div.mainmenu:hover { background: white; }.mainmenu div:hover { background: white; }</style><script type="text/javascript"></script></head><body><div style='display: inline; height: 400px; width: 400px; overflow: hidden; float: left;'><img src="img/bfssog.jpg" width="400px"><br><center><div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>Home</span></div><div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>Staff</span></div><div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>Publications</span></div><div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>FAQ</span></div><div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>Links</span></div><div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>Contact</span></div><div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>Permits</span></div><div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>Figures</span></div></center></div><div style='display: inline; height: 400px; width: 700px; overflow: hidden;'><img id="imgcityscape" src="img/cityscape01.jpg"></div><br><span>Rest of body goes here</span></body></html>

Link to comment
Share on other sites

inline styling within an element has precedence over the :hover background color within style tags within the <head>...</head>, and css styling set within a external css stylesheet which it is linked to, so the background color change using :hover wont work, because it has a lower priority.two options(1) remove inline background-color styling from element, and place it with as same priority level as :hover styling.

div.mainmenu {background: #e5e5e5;}div.mainmenu:hover { background: white; }

<div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden;'><span>Home</span></div>

(2) Use '!important' on :hover styling to give it a higher priority than inline element styling (The inline element styling must be without '!important' or again! it will have a higher priority setting).

div.mainmenu:hover { background: white !important; }

<div class="mainmenu" style='border: solid 1px black; width: 100px; height: 20px; overflow: hidden; background: #e5e5e5;'><span>Home</span></div>

Link to comment
Share on other sites

The above suggestions works excellent as long as I am not in IE. That's very odd.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...