CSS: transition properties in element itself?

Question

If i have applied a transition property to an element, i have to declare the properties in style tag, but how can i incorporate the whole declaration within the style attribute of the element?

div {
background-color: teal;
padding: 20px 20px 20px 20px;
transition: all 1s;
}
div:hover {
background-color: green;
}

<div></div>

In the above example, is it possible to simplify the code by including the transition property in style attribute of div element?

Also read: https://stackoverflow.com/questions/8284365/external-css-vs-inline-style-performance-difference — Nisarg Shah, Jul 01 '18 at 08:46
@Abhishek I mean why do it inside tag if you have css allready ??? — לבני מלכה, Jul 01 '18 at 08:47
we don't have any method to use pseudo in inline css. https://stackoverflow.com/a/1033166/7512762 — Lead Developer, Jul 01 '18 at 08:48

score 3 · Accepted Answer · answered Jul 01 '18 at 08:59

3

You can have all the declarations inside the style tag. However, the pseudo classes do not work inside the style attribute of the element.

You can possibly use the below snippet as a workaround or else define it in the stylesheet ofcourse.

<div style="width: 100%; height: 50px; background-color: red; transition: all 1s" onmouseover="this.style.backgroundColor='yellow';" onmouseout="this.style.backgroundColor='red';">
</div>

answered Jul 01 '18 at 08:59

Ankit Sharma

1,674
8
11

thank you, its js but it helped – Abhishek Choudhary Jul 01 '18 at 09:02
1

if you do not want use css you must use js/jquery to mouse hover event – לבני מלכה Jul 01 '18 at 09:03
@AnkitSharma ok bro, you did nice job – Abhishek Choudhary Jul 01 '18 at 09:04

CSS: transition properties in element itself?

If i have applied a transition property to an element, i have to declare the properties in style tag, but how can i incorporate the whole declaration within the style attribute of the element?

1 Answers1