我创建了一个 div，悬停时我希望背景颜色变为红色。当我在 Firefox 中查看它并将鼠标悬停在 div 上时，没有任何反应。我可以在 Firebug 中检查它并强制悬停类 - 这有效!但为什么它不能在浏览器中正常工作？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<button>
<div class="outer-circle">
<p>HELLO WORLD!</p>
</div>
</button>
</body>
</html>
CSS 如下:
.outer-circle {
height: 250px;
width: 250px;
border-radius: 50%;
background-color: blue;
}
.outer-circle:hover {
background-color: red;
}
button {
background-color: transparent;
border: none;
}
最佳答案
像下面这样提供悬停样式，而不是 .outer-cirlce:hover
button:hover .outer-circle {
background-color: red;
}
它会起作用的。试试吧
关于css - :hover works in firebug but not in firefox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43487030/