Question

This code should works, but in fact the span is not displayed :

<a class='linkz' href="#">
    <span style='display:none;'>span </span>
    link
</a>

.linkz:hover span
{
    display:block;
}

What I’d like to do is to display the span when I hover the link.
Why it fails? Is it not a valid CSS(2)?

Answer 1

Your display:none is set as an inline style. Inline styles will always take precedence, even over an element’s (or its parent’s) hover state.

If you can move the inline style into the stylesheet, it will work:

.linkz span
{
    display:none;
}

.linkz:hover span
{
    display:block;
}