DEV Community

Dahye Ji
Dahye Ji

Posted on

CSS basic 8 - :hover, :active, :focus

:hover

:hover is CSS pseudo-class and it matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over(mouse over) an element with cursor.
But you cannot detect when you hover something on mobile devices or devices with touch screen, hover is being used less and less now.

/* selects any <a> element when "hovered" */
a:hover {
 color: pink;
 background: black;
}
Enter fullscreen mode Exit fullscreen mode

:active

:activeis used to select and style the active link or button is being clicked. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.(A link become active when you click it)

/* selects any <a> that is being activated */
a:active {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

:active pseudo-class is commonly used on <a>
and <button> elements. But :active selector can be used on all element not only links. Other common targets of this pseudo-class include elements that contain an activated element, and form elements that are being activated through their associated .

<form>
  <label for="my-button">My button: </label>
  <button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
Enter fullscreen mode Exit fullscreen mode
form :active {
  color: red;
}

form button {
  background: white;
}
Enter fullscreen mode Exit fullscreen mode

:focus

:focus is ues to select the element that has focus. It generally triggered when the user clicks or taps on an elements or selects it with the keyboard's tab key.(:focus selector is allowed on elements that accept keyboard events or other user input)

/* selects any <input> when focused */
input:focus {
  color: green;
}
Enter fullscreen mode Exit fullscreen mode

Practice

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hover, active, focus</title>
    <style>
        .one {
            background: blueviolet;
            width: 100px;
            height: 100px;
            transition: all 2s;
        }

        .one:hover {
            background: red;
            width: 200px;
            height: 200px;
        }

        .btn {
            border: 4px solid palevioletred;
            border-radius: 4px;
            padding: 30px 60px;
            background: none;
            color: palevioletred;
            font-size: 32px;
            transition: all .3s;
        }

        .btn:active {
            background-color: purple;
            color: white;

        }

        .box:focus {
            background: red;
            color: white;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <input type="text" class="box" placeholder="cilck here!">
    <button class="btn">Click Me!!</button>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

*Use the :link selector to style links to unvisited pages, :visited selector to style links to visited pages.

Discussion (0)