Cómo crear un texto de spoiler - HTML

Un texto de spoiler significa el texto oculto y se puede ver cuando el usuario elige verlo realizando una actividad. Por ejemplo, cuando el usuario se cierne sobre el texto. El texto del spoiler se puede crear en html a través de la etiqueta del tramo fácilmente.

Discutamos la funcionalidad del texto del spoiler en detalle.

Creación de textos de spoiler en HTML

Debe haber un elemento HTML para crear el texto y luego un elemento de estilo CSS para definir las actividades y propiedades del spoiler para el elemento que contiene el texto. Diferentes clases de pseudo como ":activo",":hacer clic" y ":flotar"Se puede definir como la actividad del spoiler en el elemento de estilo. Por ejemplo, agregando el ":flotar"La clase de pseudo funcionará de tal manera que cuando el usuario cierne el cursor del mouse sobre el texto mostrará el texto.

Ejemplo: Creación de textos de spoiler con diferentes colores

Creemos tres textos de spoiler diferentes a través de tres etiquetas de tramo diferentes en HTML:

Pasar el rato para ver el texto

class = "spoiler1"> Texto 1


class = "spoiler2"> Texto 2


class = "spoiler3"> Texto 3

En el fragmento de código HTML anterior:

• • A "

    "Se agrega encabezado que dice"Pasar el rato para ver el texto".

  • Hay tres "durar"Etiqueta cada una con diferencia de una línea.
  • Los nombres de clase se declararon como "spoiler1","spoiler2" y "spoiler3"Con el texto"texto 1", Texto 2" y "texto 3", Respectivamente.

En el elemento de estilo CSS, agregue los selectores de clase para agregar propiedades a cada elemento HTML:

.spoiler1, .spoiler2, .spoiler3
de color negro;
Color de fondo: negro;

.spoiler1: hover
color blanco;

.spoiler2: hover
Color de fondo: blanco;

.spoiler3: hover
Color de fondo: amarillo;

En el elemento de estilo CSS anterior:

• • Se han agregado tres selectores de clase para definir las propiedades de los tres elementos asociados con las clases "spoiler1","spoiler2" y "spoiler3".
  • Después de eso, el selector de clase para la clase "spoiler1"Se ha agregado por separado para definir el color del texto para el elemento.
  • Del mismo modo, está el selector de clase para la clase "spoiler2"Para definir el color de fondo del elemento asociado con esta clase"blanco".
  • Por último, hay una propiedad definida para el "spoiler3"Clase para establecer el color de fondo del texto"amarillo".

Esto creará tres textos ocultos diferentes en la salida y el usuario puede verlos flotar sobre ellos de la siguiente manera:

Así es como puedes crear un texto de spoiler en HTML.

Conclusión

El texto del spoiler se puede crear fácilmente a través de las etiquetas del tramo en HTML. El desarrollador solo tiene que consultar la identificación o clase de la etiqueta SPAN en el elemento de estilo CSS con la clase pseudo que define la actividad que se realizará para mostrar el texto oculto como hacer clic o flotar sobre los elementos. Esta publicación guió sobre el método para crear un texto de spoiler en HTML.