En este artículo, sabremos cómo representar el elemento div pasando el cursor sobre la etiqueta <a> usando CSS, y entenderemos su implementación a través del ejemplo. Podemos aplicar una propiedad de selector de CSS hermano adyacente a la etiqueta <a> que mostrará el contenido del elemento div oculto mientras se desplaza sobre él. El selector de hermanos adyacentes es un combinador de CSS, que se utiliza para seleccionar el elemento adyacente o el elemento que está al lado de la etiqueta del selector especificado. Los combinadores CSS explican la relación entre dos selectores. Selector de CSSse utiliza para aplicar las diversas propiedades de estilo a los elementos seleccionados en función de los patrones y puede ser un selector simple o un selector complejo que consta de más de un selector conectado mediante combinadores.
Aquí, este combinador seleccionará solo 1 etiqueta que está justo al lado de la etiqueta especificada. Para mostrar el elemento div usando CSS al pasar el mouse sobre una etiqueta:
- Primero, configure el elemento div como invisible, es decir , mostrar: ninguno; .
- Al usar el selector de hermanos adyacente y colocar el cursor sobre una etiqueta para mostrar el elemento div.
Ejemplo: Este ejemplo ilustra cómo mostrar el elemento div al pasar el mouse sobre una etiqueta.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
div {
display: none;
}
a:hover + div {
display: block;
color: green;
font-size: 25px;
}
</style>
</head>
<body style="text:align:center;">
<h1>GeeksforGeeks</h1> <b>
Hovering below element to see
the <div> element.
</b>
<br>
<br> <a>GeeksforGeeks</a>
<div> A computer science portal for Geeks. </div>
</body>
</html>
Producción:
Navegadores compatibles: el navegador que la propiedad del selector de CSS del hermano adyacente se enumera a continuación:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Firefox 1.0
- Internet Explorer 7.0
- Ópera 3.5
- Safari 1.0
CSS es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA