gpt4 book ai didi

CSS 悬停没有反应

转载 作者:太空宇宙 更新时间:2023-11-04 02:17:09 25 4
gpt4 key购买 nike

为什么 li::hover将光标悬停在 <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>

最佳答案

li:hover 中只需一个冒号即可。一个冒号用于指示一个伪类(一小组可能的状态,例如链接、已访问、悬停、第一个 child )或某些遗留伪元素(之前和之后);两个冒号表示 CSS3 伪元素(参见 reference )。伪元素是页面上由其位置或上下文暗示的元素;伪类是现有元素的变体。

* {
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>

关于CSS 悬停没有反应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38710658/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com