CODEWITHSUNDEEP
htmlcss
Prime
Prime

Reputation: 3625

CSS span hover not working

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>

Upvotes: 2

Views: 653

Answers (7)

reblerebel
reblerebel

Reputation: 43

.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

Upvotes: 0

Quentin
Quentin

Reputation: 943939

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.

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196142

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>

Upvotes: 1

Oriol
Oriol

Reputation: 288470

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>

Upvotes: 0

Christopher Pearson
Christopher Pearson

Reputation: 1193

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.

Upvotes: 1

Anupam Basak
Anupam Basak

Reputation: 1523

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

Upvotes: 2

Josh Crozier
Josh Crozier

Reputation: 241078

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

enter image description here

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>

Upvotes: 4

Related Questions