CSS跨度悬停不起作用

Question

I want to show the dotted line when mouse hover the link, this method doesn't work.

 .text-link { color: #446CB3; font-family: "Tahoma"; font-size: 15px; text-decoration:none; } .text-link:hover { text-decoration-style: dotted; } 

 <a href="URL" target="_blank" data-role="none"> <span class="text-link">Click me</span> </a> 

Answer 1

It doesn't look like text-decoration-style: dotted is supported in all browsers :

For full support, you could use border-bottom-style: dotted .

In order for this to work, you need to remove the underline from the anchor element using text-decoration: none . Then just add a border-bottom to the element:

 a { text-decoration: none; } .text-link { color:#446CB3; font-family:"Tahoma"; font-size:15px; border-bottom: 1px solid; } .text-link:hover { border-bottom-style: dotted; } 

 <a href="URL" target="_blank" data-role="none"><span class="text-link">Click me</span></a> 

Answer 2

Try this.

HTML:

<a href="URL" target="_blank" data-role="none"><span class="text-link">Click me</span></a>

CSS:

.text-link{
    color:#446CB3;
    font-family: "Tahoma";
    font-size:15px;
    text-decoration: none;
}

.text-link:hover{
    border-bottom: 2px dotted #446CB3;
} 

Answer 3

What browser are you using? The text-decoration-style is only supported by Firefox according to W3Schools if you turn off the text-decoration-style , the hover works fine. see this fiddle .

Answer 4

This is only supported by firefox, and it required the -moz- prefix.

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

It should also applied on the a ( or remove it from the a and apply the full text-decoration on the span (

 a { color: #446CB3; font-family: "Tahoma"; font-size: 15px; } a:hover { -moz-text-decoration-style: dotted; } 

 <a href="URL" target="_blank" data-role="none"> <span class="text-link">Click me</span> </a> 

Answer 5

text-decoration-style is only supported by Firefox 36 (which, at the time of writing, isn't yet released on the stable branch).

For earlier versions of Firefox, you can use the -moz- prefixed version of the property. In other browsers you can only fake it with borders.

Answer 6

You should also set text-decoration-line and maybe text-decoration-color .

Also consider using the text-decoration shorthand property:

.text-link:hover {
  text-decoration: underline dotted;
}

 .text-link { color: #446CB3; font-family: "Tahoma"; font-size: 15px; } .text-link:hover { text-decoration: underline dotted; } 

 <a href="URL" target="_blank" data-role="none"> <span class="text-link">Click me</span> </a> 

However, you will still have anchor's text-decoration . To prevent anchor's text-decoration from affecting .text-link (but not other content that could be in the anchor), you can use

.text-link {
  display: inline-block;
}

 .text-link { color: #446CB3; font-family: "Tahoma"; font-size: 15px; } .text-link { display: inline-block; } .text-link:hover { text-decoration: underline dotted; } 

 <a href="URL" target="_blank" data-role="none"> <span class="text-link">Click me</span> </a> 

Answer 7

 .text-link { color: #446CB3; font-family: "Tahoma"; font-size: 15px; text-decoration:none; } .text-link:hover { text-decoration:underline; text-decoration-style: dotted; } 

 <a href="URL" target="_blank" data-role="none" > <span class="text-link">Click me</span> </a> 

If you still want the underline and the dots on hover

 .text-link { color: #446CB3; font-family: "Tahoma"; font-size: 15px; text-decoration:none; } .text-link:hover { text-decoration:underline; text-decoration-style: dotted; } 

 <a href="URL" target="_blank" data-role="none" class="text-link"> <span>Click me</span> </a> 

if you just want dots on hover