Los desarrolladores pueden utilizar otros elementos diversos bajo un contenedor Div. Supongamos que desea hacer clic en cualquier elemento subyacente a los que sea accesible a través del DIV. La mayoría de los desarrolladores tendrán problemas graves porque solo pueden hacer clic en los elementos subyacentes si hacen clic en el lado exterior para la superposición en el DIV. Para manejar tal situación, elija la opción de hacer clic en el DIV creado.

Esta publicación explicará el método para hacer clic en el DIV para subyacentes a los elementos en CSS.

Cómo hacer clic en DIV a elementos subyacentes en CSS?

Para hacer clic en un DIV a elementos subyacentes en CSS, primero, cree un DIV principal con un nombre en particular y agregue un ""Elemento para definir el hipervínculo, que se utiliza para vincular de una página a otra. Luego, inserte una etiqueta "" siguiendo el mismo procedimiento y especifique un nombre de clase.

Paso 1: crear un contenedor Div

Primero, utilice el ""Elemento para crear un contenedor" div "en un archivo HTML. Luego, especifique un "identificación"Dentro de la etiqueta de apertura" div "con un valor particular.

Paso 2: Crear contenedor Div anidado

A continuación, haga otro contenedor Div en el primer contenedor siguiendo el mismo procedimiento.

Paso 3: Insertar encabezado

Después de eso, utilice la etiqueta de encabezado HTML para agregar un encabezado. En este escenario, el "

Se utiliza la etiqueta de encabezado.

Paso 4: Agregue un elemento para elementos subyacentes

Ahora, inserte un ""Elemento para vincular una página con otra. Para hacerlo, agregue el "href"Atributo dentro de la etiqueta" "y establece el valor de este atributo para asignar el enlace del sitio web:

Clic en el enlace

= "https: // linuxhint.com "> no receptivo



= "https: // linuxhint.com "> Responsivo

Producción

Paso 5: Container Div Div Style

Acceda a la división principal con la ayuda del selector de atributos y el nombre como ".contenido principal":

#contenido principal
margen: 30px 50px;
borde: 3px verde punteado;
relleno: 20px 40px;
Color de fondo: RGB (207, 250, 207);

Ahora, aplique las propiedades CSS dadas anteriormente:

• "margen"Se usa para especificar el espacio alrededor del límite del elemento.
• "borde"Determina el borde fuera del elemento definido.
• "relleno"Asigna el espacio dentro del límite definido.
• "color de fondo"Implementado para configurar el color en la parte trasera del elemento.

Como resultado, el contenedor principal se diseñará de la siguiente manera:

Paso 6: Aplicar la propiedad "Pointer-Events"

Ahora, acceda al contenedor anidado usando el nombre de la clase como ".raíz":

.raíz
Pointer-Events: Ninguno;

Luego, aplique el "eventos de puntero"Administrar los componentes HTML que reaccionan a los eventos de ratón y toques. En este escenario, el valor de "eventos de puntero"Está configurado como"ninguno", Lo que significa que el elemento no reacciona a los eventos de puntero:

Paso 7: Acceda a la clase infantil

Ahora, acceda al ""Etiqueta con el nombre de la clase como".niño". Luego, aplique el "eventos de puntero"Propiedad y establecer el valor como"auto":

.niño
Pointer-Events: Auto;

El "autoSe utiliza el valor para reaccionar a eventos de puntero como hacer clic.

Producción

Se trata de hacer clic en DIV a elementos subyacentes en CSS.

Conclusión

Para hacer clic a través de DIV a elementos subyacentes, primero, haga un DIV principal con un nombre en particular y agregue un atributo de clase o identificación. Luego, inserte el ""Elemento y agregue el atributo de clase cuando era niño. Después de eso, acceda al DIV y aplique el "eventos de puntero"Sin el valor ninguno. A continuación, acceda al atributo infantil y aplique "eventos de puntero"Con el valor"auto". Este artículo ha demostrado el método para hacer clic a través de DIV a elementos subyacentes.