css - why text-decoration doesn't work under a:hover?

Question

I have the following style rules:

.twoColFixRt #nav-primary .nav li a,
.twoColFixRt #nav-primary .nav li a:visited {
  color: #00ff00;
  text-decoration: none;
}

.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 don't know why the a:hover in above code doesn't work. In other words, when the cursor is on top of the navigation item, the underline doesn't show up.

However, I do see the changes of the color when I hover the cursor over the navigation items.

Q2> I am using DW CS4 + Firebug. Is there a way that I can detect which rule suppresses a:hover so that I can figure out similar issues in the future?

score 5 · Accepted Answer · edited May 23 '17 at 12:07

5

You can get the text-decoration to show up by applying it to the nested span like so:

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

If you're interested as to the reason it's not currently working for you, you can read this question about inline boxes (your <a>) containing block boxes (your <span>).

As to detecting which rules are being applied to an element, I use the Web Developer addon for Firefox. It's CSS > View Style Information (CTRL + SHIFT + Y) is especially handy for this.

edited May 23 '17 at 12:07

Community

1
1

answered Aug 26 '10 at 02:52

Pat

25,237
6
71
68

Wow. Apparently this is only necessary in Firefox (underline shows up in the original code w Chrome and IE (8) http://jsfiddle.net/vUkZ6/ ) – Peter Ajtai Aug 26 '10 at 03:18
Hello Pat, Your solution works very well for me. Also I installed web developer, just never know how to use it. I use the CSS->View Style Information, however, I didn't where I can find that suppressed rule information. May you give me a little hint? Thank you – q0987 Aug 26 '10 at 03:26
@q0987 glad to hear. The web developer doesn't specifically list suppressed rules. When you're in `View Style Information`, click on any element and you'll get a list of all styles being applied. Then you can look over the list and see if anything is being overwritten unintentionally. – Pat Aug 26 '10 at 03:44

score 1 · Answer 2 · answered Aug 26 '10 at 03:02

1

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

answered Aug 26 '10 at 03:02

bogatyrjov

5,317
9
37
61

score 0 · Answer 3 · answered Apr 13 '22 at 11:32

The display of before content must be block, it's work fine like this:

.category li a {
    font-size: 15px;
    margin: 0;
    display: block;
    margin-bottom: 0.8rem;
}

.category li a::before {
    content: "\2022";
    color: var(--primaryColor);
    font-size: 1.4rem;
    display: block;
    margin-left: 0.4rem;
    float: right;
}

.category li a:hover::before {
    text-decoration: none !important;
}

css - why text-decoration doesn't work under a:hover?

3 Answers3