sepoto Posted May 31, 2011 Share Posted May 31, 2011 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 More sharing options...
dsonesuk Posted May 31, 2011 Share Posted May 31, 2011 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 More sharing options...
sepoto Posted May 31, 2011 Author Share Posted May 31, 2011 The above suggestions works excellent as long as I am not in IE. That's very odd. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 31, 2011 Share Posted May 31, 2011 The only IE version that can't use the !important' option is IE6 and lower, as it does not support it. The other option will work in all browser AS LONG AS you set a DOCTYPE Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.