0

I have a problem with css :not function.

When I hovering to link there is underline both of them Item1 & Description. I don't want to see underline below Description when hover.

Here is my menu code:

<ul>
 <li>
  <a href="#">
     Item 1
     <span>Description</span>
    </a>
 </li>
</ul>

CSS:

span { display:block; }
ul li a:hover:not(span) { color:blue; text-decoration: underline; }

When I change span display to inline-block it is working nice but need to be only block. How can I solve it ?

Also, Inline-block shows the description NEAR of the Item. I want to put it under of the Item Name. How can I make it ?

messparty
  • 3
  • 2

2 Answers2

0

You shouldn't put your state (:hover) before the selector. So you need to change it to:

ul li a:not(span):hover { color:blue; text-decoration: underline; }

And moreover this will not work, because, a single element cannot be a <a> as well as a <span>. Instead you need to just use:

span { display:block; }
ul li a:hover { color:blue; text-decoration: underline; }
ul li a:hover span { color:black; text-decoration: none; }
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
0

you are saying to the style a:not(span), A that is not a SPAN, of course a isn't a span ;)

Use a css class for this purpose for instance like : 

span { display:block; }
ul li a:not(.has-span):hover { color:red; text-decoration: underline; }
<ul>
 <li>
  <a href="#">
     Item 1
     <span>Description</span>
    </a>
 </li>
 <li>
  <a href="#" class="has-span">
     Item 2
     <span>Description</span>
    </a>
 </li>
</ul>
D. Peter
  • 487
  • 3
  • 12