hover

hover

X

Hover

"Hover" je stanje, ki se aktivira, ko uporabnik premakne kazalec miške nad interaktivnim elementom na spletni strani, kot je gumb, povezava ali drug HTML element. Učinki hover so pomembni, ker nudijo vizualne povratne informacije uporabniku o tem, da je element interaktiven ter da se lahko z njim izvede neko dejanje.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>hover</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>
        * {
            box-sizing: border-box;
        }
        .div {
            padding: 20px 10px;
            background-color: skyblue;
            border: 2px solid deepskyblue;
            border-radius: 6px;
            color: red;
            text-align: center;
        }
        .div:hover {
            background-color: orange;
            border: 2px solid red;
            color: black;
        }
        /* hide the element */
        .hide {
            display: none;
        }
        .open {
            text-align: center;
            font-size: 24px;
            padding: 1%;
            word-break: break-all;
        }
        /* when moving the mouse cursor over the element, it appears */
        .open:hover .hide {
            display: block;
            background-color: greenyellow;
            padding: 30px;
            border: 1px solid green;
            border-radius: 6px;
        }
    </style>
</head>
<body>
<div class='div'>Premakni miškin kazalec nad div.</div>

<div class="open">Premakni miškin kazalec nad element
    <p class='hide'>Dobrodošli v CSS vadnici!</p>
</div>
</body>
</html>