KiYugadgeter KiYugadgeter - 4 months ago 28
CSS Question

CSS hover does not react

Why

li::hover
does not react when hover the cursor on
<li>
?



* {
box-sizing: border-box;
font-family: "Hiragino Kaku Gothic Pro", sans-serif;
}

ul {
list-style-type: none;
}

li {
background-color: #555;
color: white;
display: table-cell;
width: 200px;
margin: 0;
height: 43px;
text-align: center;
vertical-align: middle;
}

li::hover {
background-color: black;
}

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>List</title>
<link rel="stylesheet" href="listbar.css" type="text/css">
</head>
<body>
<ul>
<li>Python</li>
<li>C</li>
<li>Ruby</li>
<li>JavaScript</li>
<li>Lisp</li>
</ul>
</body>
</html>




Answer

Just one colon in li:hover will do. One colon is used to indicate a pseudo-class (a small set of possible states such as link, visited, hover, first-child) or certain legacy pseudo-element (before and after); two colons indicate a CSS3 pseudo-element (see reference). A pseudo-element is an element on the page that's implied by its location or context; a pseudo-class is a variation on an existing element.

* {
    box-sizing: border-box;    
    font-family: "Hiragino Kaku Gothic Pro", sans-serif;
}

ul {
    list-style-type: none;
}

li {
    background-color: #555;
    color: white;
    display: table-cell;
    width: 200px;
    margin: 0;
    height: 43px;
    text-align: center;
    vertical-align: middle;
}

li:hover {
    background-color: black;
}
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>List</title>
        <link rel="stylesheet" href="listbar.css" type="text/css">
    </head>
    <body>
        <ul>
            <li>Python</li>
            <li>C</li>
            <li>Ruby</li>
            <li>JavaScript</li>
            <li>Lisp</li>
        </ul>
    </body>
</html>

Comments