My question is how do you use huver in sololearn app?

Question

When I put huver attribute in my code how do you see that working?

Answer 1

In this app if we click we see hover effect.

Answer 2

To set a separate CSS style using :hover, you must have the following syntax:

element {
attribute:value1;
}
element:hover {
attribute:value2;
}

So, if you had images inside of a page, where the images were set to show with a scaled width of 100 pixels, but when you hover over them, you want them to expand to a width of 200 pixels, you would use the following:

img {
width:100px;
}
img:hover {
width:200px;
}

Now, when the cursor moves over any image on the page, it will transition from 100px wide to 200px wide.

Note: Adding a transition attribute to the initial element will animate the transition. like this:

img {
width: 100px;
transition: .5s; // Time in seconds.
}
img:hover {
width: 200px;
}