CSS: transition properties in element itself? [duplicate]

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?

@Abhishek I mean why do it inside tag if you have css allready ??? — לבני מלכה
– לבני מלכה, Commented Jul 1, 2018 at 8:47
we don't have any method to use pseudo in inline css. stackoverflow.com/a/1033166/7512762 — Lead Developer
– Lead Developer, Commented Jul 1, 2018 at 8:48

Ankit Sharma · Accepted Answer · 2018-07-01 08:59:16Z

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 1, 2018 at 8:59

Ankit Sharma

1,70410 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhishek Choudhary Over a year ago

thank you, its js but it helped

לבני מלכה Over a year ago

if you do not want use css you must use js/jquery to mouse hover event

Abhishek Choudhary Over a year ago

@AnkitSharma ok bro, you did nice job

Collectives™ on Stack Overflow

CSS: transition properties in element itself? [duplicate]

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 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

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 Answer 1

3 Comments

Linked

Related