答：懸停在span標籤，如何去除hover樣式

Question

a:hover { 
 
    text-decoration:underline; 
 
}

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

如何刪除hover樣式只TITLE1。

title1沒有下劃線，標題加下劃線;

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

你實際上是告訴你的鏈接有下劃線的文本。 使用a：hover {text-decoration：none;} 要在鏈接中設置範圍，您可以更深入： a：hover span {color：blue;}例如。

Answer 3

您可以使用僞元素：前

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 4

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

這也給出正確的結果