a: schweben in Span-Tag, wie Hover-Stil

Question

a:hover { 
 
    text-decoration:underline; 
 
}

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

entfernen Wie schweben Stil nur title1 zu entfernen.

title1 ist keine Unterstreichung und der Titel ist unterstrichen;

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

Sie sagen eigentlich Ihr Link unterstrichener Text zu haben. Verwenden Sie a: hover {text-decoration: none;} Um Ihren Bereich innerhalb eines Links zu formatieren, können Sie tiefer gehen: a: hover span {color: blue;} zum Beispiel.

Answer 3

können Sie ein Pseudoelement verwenden mit: vor

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/ 

Diese geben auch die richtigen Ergebnisse