Custom Hover Animation

Hi All

I would like to write some custom code to change the background color of a paragraph from dark grey to light grey when you hover over it with the mouse. I have had a look in the standard animations, ad whilst there is a hover selector for the element there isn’t the animation I require available (there just set animations like bounce, flash, pulse…etc). Please can anyone give me a pointer on how to achieve this. I have tried adding it to the attributes as an additional style attribute and could not get it to work

Many thanks

p:hover {background-color:#e1e1e1;color:black!important;}
p {background-color: #303030;color: white;}

add that to your styles.css


Worth noting: what you’ve requested (and @kuligaposten so graciously provided you) is not an “animation”, it’s called a CSS pseudo class state.

The reason it’s not available as an option within Bootstrap Studio is because 1) it’s already built-into most Bootstrap components that change their appearance when hovered over (like buttons, links, etc…) and 2) it’s a very basic, standard part of CSS that you’ll find covered in any CSS instructional class or tutorial.

At the bare minimum, I would highly recommend you follow this tutorial…
Knowing how to write CSS is more or less an indispensable skill if you plan to do much website development with Bootstrap Studio.

Many thanks kuligaposten for your help, Much appreciated

1 Like