Why doesn't text layout work under: hover?

.twoColFixRt # nav-primary.nav li a, .twoColFixRt # nav-primary.nav li a: visited {color: # 00FF00; text-finish: no; } .twoColFixRt # nav-primary.nav li a span {Display: block; padding: 0 10px; font-size: 15px; } .twoColFixRt # nav-primary.nav li a: hover {text-decoration: underline; color: # FF0000; }

Q1> I do not know why a: hover in the above code does not work. In other words, when the cursor is over the navigation item, the underline is not displayed.

However, I see color changes when I hover over navigation items.

Q2> I am using DW CS4 + Firebug. Is there a way that I define which rule suppresses: hover so that I can find similar problems in the future?

thanks

+4
source share
2 answers

You can get decoration text to display it by applying it to a nested range like this:

.twoColFixRt #nav-primary .nav li a:hover span { text-decoration: underline; color:#FF0000; } 

If you are wondering why it is not working at present, you can read this question about inline blocks (your <a> ) containing block blocks (your <span> ).

As for determining which rules apply to an element, I use addon for Web Developer for Firefox. This CSS> View style information (CTRL + SHIFT + Y) is especially convenient for this.

+5
source

Apply the text-decoration property in the inline css of your element. If this works, find out what messed up your external css.

+1
source

All Articles