Member Avatar for lsvife

could anyone help why hover doesnt work on some of my link.
below is my code!
thnks in advance!!!

a:link {color:#FF0000;}     

a:visited {color:#00FF00;} 

 a:hover {text-decoration: underline;} 

a:active {color:#0000FF;}
  • 3 Contributors
  • 8 Replies
  • 136 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

The CSS shown by is correct in principle, but when only some anchors fail to show a hover style the usual causes are cascade/specificity, an overlay blocking pointer events, or a more specific rule later in the stylesheet. 's suggestion to test with a more specific selector is the right troubleshooting direction, and 's note about classes vs IDs is useful: an ID-based rule will beat a plain a rule unless the latter is made more specific.

Quick diagnostic checklist:

  • Use the browser inspector and force the hovered state for a problematic link to see which rule actually supplies text-decoration (or text-decoration-line / computed styles). This will show if another rule is overriding the hover.
  • Check for overlays or invisible elements covering the link (z-index, absolute positioning). Also check pointer-events on the link or its parents.
  • Look for inline styles or ID/class selectors that appear after your global rules in the cascade — these can silently override a general hover rule.
  • Validate the HTML/CSS (broken markup can produce strange results).

A small, safe visual debug you can add temporarily in the page to reveal anchor boxes and overlays:

/* temporary debug — highlight anchor boxes to reveal overlap */
a { outline: 2px dashed red; background: rgba(255,0,0,0.03); }

If the debug shows anchors are covered, adjust z-index or remove the covering element. If a more-specific rule is winning, either make the hover rule more specific for that group of links (prefix with the container or use a class) or move your hover rules later in the stylesheet. Avoid !important unless you understand the side effects.

Further reading on how selectors and cascade interact: Specificity — MDN and the pseudo-class reference for hover: ":hover" — MDN.

Recommended Answers

All 8 Replies

Member Avatar for Dandello

But where is the rest of it? Without the html this is supposed to style, we have no way to know where the problem might be - aside from that space in front of the a:hover which should make no difference.

Member Avatar for lsvife

sorry for late reply coz i've been busy...

this is my html code:

<div id="hover">
<a href="home.jsp">home</a>
<a href="profile.jsp">profile</a>
<a href="contact.jsp">contact</a>
</div>
Member Avatar for Dandello

What's the styling on #hover? Does it have anything that might conflict with

a:hover {text-decoration: underline;}

Have you tried

#hover a:hover {text-decoration: underline;}

?

Member Avatar for lsvife

I havent tried that coz I want to apply hover on all link without specifying the class or id???is it possible?

Member Avatar for Dandello

All I'm suggesting is to test it that way. There still may be something keeping the items in the div from inheriting the way you think they should.

You might also try

a:link:hover {text-decoration: underline;}
Member Avatar for geneh23

maybe this might help..classes are for multiple items (you can specify a certain div to be a specific class without affecting everything else with in that apparent ID)

...ID's are for one major item(s)..you can use classes repeatedly where ever you wish. ID's are ment for things like containers, header, footer..ect..

Member Avatar for lsvife

I think im gonna do it that way!!!thanks for the help!!!

Member Avatar for Dandello

Also validate both your html and css. - Errors and strange behavior can slip in that way as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.