CODEWITHSUNDEEP
css
sally
sally

Reputation: 21

How to keep color when mouse over text

I want to keep the color when I mouse over the text.However, I don't know how to keep this forever. Any Suggestions?

just like that :

thanks

.link span{
    color:blue;
    font-size:30px;
}

.link:hover span{
    font-weight:bold;
    color: red;
    text-decoration:none;
}

.link:hover{
    text-decoration:underline;

}
<a href="#" class="link">
    <span>
        my link
    </span>
</a>

Upvotes: 2

Views: 33

Answers (2)

Akshay
Akshay

Reputation: 14368

You can try transition hack to achieve this

.link span{
    color:blue;
    font-size:30px;
  transition:0s 1000000000000000000000s;
}

.link:hover span{
    font-weight:bold;
    color: red;
    text-decoration:none;
  transition:0s;
}

.link:hover{
    text-decoration:underline;

}
<a href="#" class="link">
    <span>
        my link
    </span>
</a>

Upvotes: 2

Samuel Liew
Samuel Liew

Reputation: 79073

If you want a permanent change, you will have to use JavaScript to add a class to it on hover. You cannot do this using CSS only.

// Add JS:
var links = document.getElementsByClassName('link');
for(i=0;i<links.length;i++) {
  links[i].onmouseover = function() {
    this.className = 'link active';
  }
}
.link span{
    color:blue;
    font-size:30px;
}

.link.active span, // Add this selector
.link:hover span{
    font-weight:bold;
    color: red;
    text-decoration:none;
}

.link:hover{
    text-decoration:underline;

}
<a href="#" class="link">
    <span>
        my link
    </span>
</a>

Upvotes: 0

Related Questions