Member Avatar for baltazar

I have a horizontal CSS menu that has the following HTML structure.
<ul>
<li><a class="top_link">Item 1</a></li>
</ul>

I would like to know what the difference is between the following two CSS codes and what they do. (top_link is the class name I have given to the a tag) I am especially confused about the second one.

li a.top_link :hover
li:hover > a.top_link

Thanks

  • 4 Contributors
  • 3 Replies
  • 111 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by sreein1986

Dani AI

Generated

Common source of confusion: those two selectors attach the hover pseudo-class to different elements. One form (the one with a space before the pseudo-class) targets a hovered descendant inside the anchor, so it will not change the anchor when the mouse is over its text. The other form applies the hover to the list item and then selects the anchor when that list item is hovered, which is why many menu implementations use it — the visible link changes when the entire menu cell is hovered, not just the text.

Practical implications: using the list-item hover gives a larger hit area and feels nicer for horizontal menus. Older browsers (notably IE6) only supported hover on anchors, so that approach would not work there without a fallback; modern browsers support :hover on any element. For compatibility and details see the MDN reference on the hover pseudo-class and combinators: MDN :hover and MDN child combinator.

Troubleshooting tips: check for an accidental space in your selector (that changes which element the pseudo-class applies to); ensure the element you intend to style actually exists as a child of the hovered element; look at z-index or pointer-events if the hover seems unresponsive; and consider keyboard accessibility by including focus styles as well. As partly noted, anchor hover behaves differently from hovering the parent element; and as reminded, pay attention to the ordering and specificity of link states when multiple rules interact.

Recommended Answers

All 3 Replies

Member Avatar for raj2476

Second one is working as a default hyper link. it's working like default link "a.top_link" and a.top_link:hover will show u the result when u will put ur mouse over on the link. If u will remove "a.top_link' from ur stylee then "a.top_link :hover' will not work anymore.

Member Avatar for casper_wang

I have a horizontal CSS menu that has the following HTML structure.
<ul>
<li><a class="top_link">Item 1</a></li>
</ul>

li a.top_link :hover
li:hover > a.top_link

Thanks

a:link	{ color: #898989; text-decoration: none; } /* link normal*/
a:visited	{ color: #898989; text-decoration: none; } /* previously visited link*/
a:hover	{ color: #d3d3d3; text-decoration: underline; } /* mouse over the link*/
a:active	{ color: #d2d2d2; text-decoration: none; } /* onclick the link*/

hope that answers you

Member Avatar for sreein1986

you didn't post clearly what you want second CSS style sheet i didn't get it

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.