MouseOver Works Sporadically

michaeloew / 2012-12-03 01:26:44   

Hello once again!

My site michaeloew.com/ almost looks perfect (at least considering my limited coding abilities) but I'm still having trouble making all the links behave consistently when it comes to the mouseover effect. Each exhibit and section title should switch to a different color when the mouse hovers over them, yet only some of them do. This also varies by browser; in Firefox most work, while in Chrome most don't (the few exceptions being "Opera Viva" and "For Rent" under the "Photography" section, and the "Urban Design" to "Visual Merchandising" section titles). I'm sure in other browsers there's even more variability.

I've double-checked the header properties, and it seems all section titles are the same class, as are all the exhibit titles, so I don't understand why some would behave differently from others. Any ideas? Thanks in advance for any help!

arsondpi / 2012-12-03 07:49:55   

I used firebug to track down the css path to find the right selector.
I suggest that you do the same for this sort of stuff.
For example:

  1. /* The following controls the hover state for Architecture */
  2. #index ul#section_2.section li a:hover { background: red; }
  3. /* The following controls the hover state for Photography */
  4. #index ul#section_1.section li a:hover { background: green; }
  5. /* The following controls the hover state for Urban Design */
  6. #index ul#section_4.section li a:hover { background: blue; }
  7. /* The following controls the hover state for Graphic Design */
  8. #index ul#section_5.section li a:hover { background: yellow; }
  9. /* The following controls the hover state for Visual Merchandising */
  10. #index ul#section_6.section li a:hover { background: purple; }
michaeloew / 2012-12-10 02:17:09   

Thanks arsondpi! I still don't know how you got Firebug to give you that list you pasted into your response, but I was at least able to see which files affected each link. It turns out that for some reason the "visited links" CSS was taking precedence over the "hover over" CSS, so I just deleted all the stuff between the brackets and it worked fine for lower-level links. And the browser might have been looking at another CSS file for exhibit and index links, so I copied the "hover over" text from one CSS file to the other and it seems to have cleared those links up too.

Thanks again!

This thread has been closed, thank you.