a：將鼠標懸停在span標簽中，如何刪除懸停樣式

Question

 a:hover { text-decoration:underline; } 

 <div> <ul> <li> <a> <span class="title1"> title1 </span> title2 is hover underline </a> </li> </ul> </div> 

如何刪除僅標題1的懸停樣式。

title1不帶下划線，title為帶下划線；

Answer 1

 a:hover {text-decoration:underline;} .title1 { display: inline-block; vertical-align: top; } a:hover .title1 { text-decoration:none; } 

 <div> <ul> <li><a><span class="title1">title1</span>title2 is hover underline</a></li> </ul> </div> 

Answer 2

您可以將偽元素與：before一起使用

 a { font-weight: 300; display: inline-block; padding-bottom: 2px; position: relative; } a:hover:before{ content: ""; position: absolute; width:85%; height: 1px; left:18%; bottom: 0; border-bottom: 1px solid red; } 

 <div> <ul> <li><a><span class="title1">title1</span>title2 is hover underline</a></li> </ul> </div> 

Answer 3

Try to this link:https://jsfiddle.net/17d80ym3/12/

這也可以給出正確的結果

Answer 4

您實際上是在告訴您的鏈接帶有下划線的文字。 使用a：hover {text-decoration：none;}要在鏈接中設置跨度樣式，您可以更深入：例如a：hover span {color：blue;}。