Question

我创建了一个div并在悬停时我希望背景颜色变为红色。当我在Firefox中查看并鼠标悬停时，没有任何反应。我可以在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;
}

Answer 1

将下面的悬停样式改为.outer-cirlce：hover

button:hover .outer-circle {
    background-color: red;
}

它会起作用。试试吧

Answer 2

只需使用html，就像这个文字也在圆圈中心

<button class="outer-circle">
    <div>
     <p>HELLO WORLD!</p>
    </div>
</button>

Answer 3

它可以根据您的要求工作，您也可以在代码段中看到。所以实现这段代码我希望它对你有用。

＆＃13;

<!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">
  
  <style>
  .outer-circle {
  height: 250px;
  width: 250px;
  border-radius: 50%;
  background-color: blue;
  display: table;
}
.outer-circle p{
display: table-cell;
vertical-align: middle;
margin:0;
}

.outer-circle:hover {
  background-color: red;
}

button {
  background-color: transparent;
  border: none;
  cursor:pointer;
}
button:hover .outer-circle {
    background-color: red;
}
  </style>
</head>
<body>
  <button>
    <div class="outer-circle">
     <p>HELLO WORLD!</p>
    </div>
 </button>
</body>
</html>

＆＃13;

谢谢，

Answer 4

检查此代码

https://plnkr.co/edit/JlGWuI3UB2ChMNS2YyK3?p=preview

<div class="outer-circle" onclick="clickFunc()">
 <p>HELLO WORLD!</p>
</div>

您将圆圈div放在按钮标记内，以便悬停类无效。

我在“外圈”上更改了添加点击功能的结构＆＃39;类。希望这会有所帮助。

：悬停在firebug中工作，但在firefox中不起作用

4 个答案: