This content originally appeared on DEV Community and was authored by Dahye Ji
: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;
}
: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;
}
: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>
form :active {
color: red;
}
form button {
background: white;
}
: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;
}
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>
*Use the :link selector to style links to unvisited pages, :visited selector to style links to visited pages.
This content originally appeared on DEV Community and was authored by Dahye Ji
Dahye Ji | Sciencx (2021-11-09T14:29:47+00:00) CSS basic 8 – :hover, :active, :focus. Retrieved from https://www.scien.cx/2021/11/09/css-basic-8-hover-active-focus/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.