Le rôle du survol en HTML-tutoriel HTML-php.cn

Le rôle du survol en HTML

WBOY

Libérer： 2024-02-20 08:58:23

original

791 Les gens l'ont consulté

Le rôle du survol en HTML

Le rôle du survol en HTML et exemples de code spécifiques

Dans le développement Web, le survol fait référence au déclenchement de certaines actions ou effets lorsque l'utilisateur passe le curseur sur un élément. Il est implémenté via la pseudo-classe CSS :hover. Dans cet article, nous présenterons le rôle du survol et des exemples de code spécifiques.

Tout d'abord, le survol permet à un élément de changer de style lorsque l'utilisateur le survole. Par exemple, lorsque vous passez la souris sur un bouton, la couleur d'arrière-plan ou la couleur du texte du bouton peut être modifiée pour rappeler à l'utilisateur le bouton actuellement sélectionné. Voici un exemple de code simple :

<!DOCTYPE html>
<html>
<head>
    <style>
        .btn {
            background-color: blue;
            color: white;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
        
        .btn:hover {
            background-color: red;
        }
    </style>
</head>
<body>
    <button class="btn">按钮</button>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, la couleur d'arrière-plan initiale du bouton est bleue, et lorsque la souris survole le bouton, la couleur d'arrière-plan du bouton passe au rouge.

Deuxièmement, le survol peut également être utilisé pour créer des effets interactifs. Par exemple, lorsque la souris survole une image, un effet de grossissement peut être affiché, ou sur un menu de navigation, lorsque la souris survole une option, un menu secondaire peut être affiché. Voici un exemple de code qui utilise le survol pour créer un effet d'agrandissement d'image :

<!DOCTYPE html>
<html>
<head>
    <style>
        .image {
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        
        .image img {
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease-in-out;
        }
        
        .image:hover img {
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div class="image">
        <img src="image.jpg" alt="图片">
    </div>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, lorsque la souris survole l'image, l'attribut d'échelle de l'image est défini sur 1,2, c'est-à-dire que l'image est agrandie. 1,2 fois, obtenant ainsi un effet de grossissement de l'image.

Enfin, le survol peut également être utilisé pour contrôler l'affichage et le masquage des éléments. Par exemple, dans une liste, lorsque la souris survole un élément de liste, le contenu détaillé de cet élément de liste s'affiche. Voici un exemple de code qui utilise le survol pour contrôler l'affichage et le masquage des éléments :

<!DOCTYPE html>
<html>
<head>
    <style>
        .list-item {
            display: none;
        }
        
        .list:hover .list-item {
            display: block;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
        <li class="list-item">列表项1的详细内容</li>
        <li class="list-item">列表项2的详细内容</li>
        <li class="list-item">列表项3的详细内容</li>
    </ul>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, lorsque la souris survole l'élément de liste, le contenu détaillé de l'élément de liste est affiché via le pseudo- :hover sélecteur de classe.

Pour résumer, le survol joue un rôle important dans le développement Web. Il peut modifier le style des éléments, créer des effets interactifs et contrôler l'affichage et le masquage des éléments. En utilisant correctement le survol, vous pouvez ajouter plus d'interactivité et attirer davantage vos pages Web.

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!