：懸停在firebug中工作，但不在firefox中

我創建了一個div並懸停，我希望背景顏色變成紅色。當我在Firefox中查看它並將鼠標懸停在div上時，什麼都沒有發生。我可以在Firebug中檢查它，並強制懸停類 - 這是有效的！但是爲什麼它在瀏覽器中不能正常工作呢？：懸停在firebug中工作，但不在firefox中

<!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; 
}

來源

2017-04-19 Lupeman1

基於這些信息，我會說最有可能的塊級段落元素偷了鼠標，當然p：hover沒有任何樣式。雖然我不記得它的工作方式，但有點奇怪。 – Christopher

刪除它將起作用的按鈕標籤。 –

是的，我會說這個按鈕是輸入類型提交的補充 - 輸入不包含嵌套元素（僅文本） - 這是我的直覺 –

給這樣的懸停風格之下，而不是.outer-cirlce的：懸停

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

它將工作。試試吧

來源

2017-04-19 05:34:49

謝謝大家，但這個答案對我來說最合適！非常感激！ – Lupeman1

剛剛使用html這樣的文字也居中在圈內

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

來源

2017-04-19 05:46:15

它正在按您的要求，你也可以在摘要中看到。所以實現這個代碼我希望它能爲你工作。

<!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>

感謝，

來源

2017-04-19 05:49:38

檢查這個代碼

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

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

你放在圈子DIV按鈕標記內，這樣懸停類不工作。

我改變了結構在'外圈'類中添加的點擊功能。希望這可以幫助。

來源

2017-04-19 06:39:50 Sharmila

：懸停在firebug中工作，但不在firefox中

回答

相關問題