CSS hover does not react

Question

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>

Owen · Accepted Answer · 2016-08-02 02:18:11Z

1

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>

edited Aug 2, 2016 at 2:18

answered Aug 2, 2016 at 1:56

Owen

1,54712 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KiYugadgeter Over a year ago

Some css selector use two colon. What's the difference of two and one?

Owen Over a year ago

Added a bit more explanation in case that helps.

Caleb Anthony · Accepted Answer · 2016-08-02 02:08:01Z

1

Your code works great except that

li::hover {

needs to be

li:hover {

You had an extra colon in there.

answered Aug 2, 2016 at 2:08

Caleb Anthony

1,1239 silver badges19 bronze badges

Comments

TonyYang · Accepted Answer · 2016-08-02 02:21:52Z

0

You need write like that:

  li:hover {
        background-color: black;
    }

answered Aug 2, 2016 at 2:21

TonyYang

13 bronze badges

Collectives™ on Stack Overflow

CSS hover does not react

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related