CODEWITHSUNDEEP
htmlcsshoverstylesheet
CJU
CJU

Reputation: 1

a:hover in span tag, how to remove hover style

a:hover {
   text-decoration:underline;
}
<div>
<ul>
  <li>
    <a>
     <span class="title1">
      title1
     </span>
    title2 is hover underline
    </a>
 </li>
</ul>
</div>

How to remove hover style only title1.

title1 is none underline and title is underline;

Upvotes: 0

Views: 2501

Answers (4)

SMS
SMS

Reputation: 84

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

This also give the correct results

Upvotes: 0

Sagar Kodte
Sagar Kodte

Reputation: 3815

You can use a pseudo element with :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>

Upvotes: 0

Remco Borst
Remco Borst

Reputation: 11

you are actually telling your link to have underlined text. use a:hover{text-decoration:none;} To style your span within a link you can go deeper: a:hover span{color:blue;} for example.

Upvotes: -1

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 4

Related Questions