Question

a:hover {
   text-decoration:underline;
}

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

如何仅删除悬停样式title1。

title1没有下划线，标题是下划线;

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以使用伪元素：before

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

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

这也给出了正确的结果

Answer 4

您实际上是在告诉您的链接是否有下划线文字。使用a：hover {text-decoration：none;} 要在链接中设置跨度样式，您可以更深入地了解： a：悬停跨度{color：blue;}例如。

a：将鼠标悬停在span标记中，如何删除悬停样式

4 个答案: