：ホバーは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がある：それは動作します

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

を置く：

.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：ホバーにはスタイルがありません。私はそれがそのように働いているとは思いませんが、ちょっと変です。 – Christopher

ボタンタグを削除します。 –

ええ、私はそのボタンが入力タイプの補完であると言うでしょう - 入力は入れ子要素（テキストのみ）を含むように作られていません - これは私の勘弁です –

ではなく.outer-cirlceの下にこのようなホバースタイルを与えます。それは

出典

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

確認することをホバークラスが動作しないようにするには、ボタンタグ内円のdivを置くこのコード

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

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

。

「アウターサークル」クラスのクリック機能を変更しました。お役に立てれば。

出典

2017-04-19 06:39:50 Sharmila

：ホバーはfirebugでは動作しますが、firefoxでは動作しません

答えて

関連する問題