Pouvez-vous rendre un élément « div » entier cliquable avec HTML et CSS uniquement ?

Rendre un 'div' entier cliquable en HTML et CSS sans JavaScript

Dans le développement Web, il est généralement souhaité de créer un 'div' entier div' élément cliquable, lui permettant de naviguer vers une autre page lorsqu'on clique dessus. Les méthodes traditionnelles impliquent l'utilisation de JavaScript, mais existe-t-il un moyen d'y parvenir avec du HTML et du CSS valides ?

Le problème avec les éléments en ligne

Tentative de placer un niveau de bloc Un élément tel qu'un « div » au sein d'un élément en ligne, tel qu'une ancre « a », soulève des inquiétudes selon le validateur du W3C. Pour résoudre ce problème, une approche alternative est nécessaire.

Solution : Utiliser un lien Fill-the-Div

En utilisant CSS et le style, un élément « div » peut être rendu cliquable sans JavaScript en le remplissant avec un lien.

Styles CSS

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

Marquage HTML

<div>

Cette solution positionne l'élément de lien pour remplir toute la zone « div », ce qui entraîne l'apparition d'un « div » cliquable lorsque les utilisateurs cliquent n'importe où à l'intérieur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!