by Sai gowtham

How to use a:hover in Inline Css

In this tutorial, we are going to learn about how to apply a hover effect to the anchor (<a>) element in inline css.

Normally, there is no way to use a:hover in inline css because the pseudo-class selectors only work on external stylesheets, but we can apply the same hover effect to an html anchor element using JavaScript onmouseover and onmouseout event.

Here is an example:

<a href="https://google.com"
  onmouseover="this.style.color='red'"
  onmouseout ="this.style.color='blue'">
     google.com
</a>

Now, if we hover on the above element it will change to red color.

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course