Cómo agregar estilos CSS en línea en el flotador

El ":flotar"Es el pseudo-selector, lo que significa que se reconoce solo en la hoja de estilo CSS. Los usuarios no pueden aplicar estilos en línea de CSS en Hover. Sin embargo, para agregar CSS en línea al flotador, es mejor darle al elemento un nombre o identificación de clase y luego usarlo en la hoja de estilo para aplicar estilos o usar funciones de JavaScript.

Este artículo le instruirá que agregue estilos CSS en Hover usando JavaScript.

Cómo agregar estilos CSS en el flotador?

No hay métodos para usar el ciervo en CSS en línea. Sin embargo, para aplicar el efecto de desplazamiento en un elemento usando su ID, consulte el ejemplo dado.

Ejemplo

En HTML, agregue un elemento div que tenga el nombre de clase "contenido principal". Dentro de este div, agregue un "

"Elemento para especificar el encabezado. Después de eso, agregue el "Elemento "con algún contenido que se especifica con los atributos:

• • "href"El atributo especifica el enlace.
  • "identificaciónEl atributo está configurado para hacerlo accesible para el CSS.
  • También especifique las funciones "ratón sobre()" y "mouse_out ()" en eso. En Mouse Hover, estas funciones activarán e invocarán la función en JavaScript:

Agregar flotante en CSS en línea

Escuela Linuxhint!

Pasemos a la sección CSS, donde los elementos HTML se proporcionan con propiedades de estilo.

Elemento de cuerpo de estilo

cuerpo
Color de fondo: #863A6F;

El color de fondo del elemento del cuerpo se establece utilizando el "color de fondo" propiedad.

Estilo principal Div-Content Div

.contenido principal
Ancho: 400px;
Altura: 100px;
Color de fondo: #D989B5;
margen: auto;
relleno: 20px;
Border-Radius: 10px;

El ".contenido principal "Se refiere al contenido principal de la clase, que se diseña de la siguiente manera:

• • "anchoLa propiedad establece el ancho del elemento HTML.
  • "altura"La propiedad define la altura del elemento HTML.
  • "color de fondo"La propiedad especifica el color de fondo del elemento.
  • "margen"La propiedad establece el espacio en el elemento.
  • "relleno"La propiedad establece el espacio en el contenido del elemento.
  • "radio fronterizoLa propiedad se utiliza para redondear los bordes del elemento.

Elemento de estilo

a
tamaño de fuente: 20px;
Decoración de texto: ninguna;
relleno: 10px;

El "El elemento se diseña utilizando las siguientes propiedades:

• • "tamaño de fuente"La propiedad especifica el tamaño de fuente del elemento.
  • "decoración de textoPropiedad con valor Ninguno Elimina el subrayado del texto.

Javascript

En el código JavaScript dado:

• • ""La etiqueta se utiliza para especificar el código de script.
  • "función mouse_over ()": La función es la palabra clave para definir la función mouse_over ().
  • "documento.getElementById ("HOV").estilo.color = "amarillo""Toma la identificación"hov"Del elemento como parámetro y establece su color de estilo como amarillo.
  • "función mouse_out ()"Usa el"documento.getElementById ("HOV").estilo.color = "blanco""Método para tomar la identificación"hov" del "El elemento como un parámetro en el que el color del estilo se cambiará a blanco.
  • ""¿Es la etiqueta de cierre?.

Aquí, puede ver, en el flotador, el estilo de color del texto cambia al amarillo, y cuando se elimina, el color del texto se convierte en blanco:

Esa es la forma de aplicar los estilos CSS en Hover.

Conclusión

El ":flotar"¿Es el pseudo-selector, que significa solo en CSS?. No existen métodos para agregar estilos de CSS en línea en Hover. Por lo tanto, es mejor usar las funciones de JavaScript para especificar las propiedades en el ratón flotante sobre un elemento. Esta publicación ha demostrado el método para agregar estilos CSS en Hover.