How to give hover effect in inline html?

Question

I want to give inline css for p tag in html inline,so what i need is something look likes this,

<p class="skill" style="hover {border-color:#20b920;}">Node.js</p>

Is there a way to give such thing in inline html,

Short answer : you can't,Long answer : bad practice http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css — bigbounty, May 07 '17 at 18:52

score 4 · Accepted Answer · 2017-05-07T19:02:17.973

4

Correct way to do it (in my opinion)

Use css with selector p.skill:hover.

For example:

p.skill:hover {
    background-color: yellow;
}

The way you want to do... Use javascript

<p class="skill" onmouseover="this.style='background-color:#20b920;';" onmouseout="this.style='background-color:white';">Node.js</p>

Don't forget to change "white" to color of parent element background.

edited May 07 '17 at 19:02

answered May 07 '17 at 18:51

2

I don't need this,I need INLINE css – Mehul Prajapati May 07 '17 at 18:52
If i don't give inline css i have to add 10-12 separate different classes and different styles for them – Mehul Prajapati May 07 '17 at 18:54
1

You can use javascript for this – May 07 '17 at 19:02
But this is VERY BAD IDEA to do it, because it will be very difficult to update. – May 07 '17 at 19:03
Thanks javascript did the work – Mehul Prajapati May 07 '17 at 19:11

1 Answers1