0
ボタンリストがあります。そのリスト内のボタンにカーソルを合わせると、そのリージョンの状態リストがボタンの上に表示されます。すべてがクロームで動作しますが、firefoxとsafariでは、ボタンが上に乗ったときに状態のリストが表示されません。背景は色が変わり、ポインタは変わりますが、何らかの理由で情報の一部が表示されません。兄弟セレクタホバーはChromeでのみ動作します
私は参照としてこの記事を使用して、私のセレクタは、より具体的な作られたが、それは問題を修正didntは：ここで.class:hover not working in firefox?
は私のボタンのhtmlとセレクタCSSです：
.d-region{
border-width: 1px;
border-style: solid;
border-color: #000000;
position: relative;
overflow: hidden;
}
.d-region--width{width: 285px; margin: 0 auto;}
.d-region__head{
font-size: 24px;
background-color: #000000;
color: rgb(255, 255, 255);
text-shadow: 0.4px 0.4px #000000;
text-align: center;
padding: 20px 15px;
}
.d-region__contain{height: 75px;position: relative;}
.d-region__btn{
font-family: Veranda, Helvetica, sans-serif;
border: 0px;
background: rgba(255, 255, 255, 0.0);
font-size: 18px;
font-weight: 300;
width: 285px;
height: inherit;
color: rgb(25, 155, 220);
z-index: 98;
}
.d-region__note{
font-family: Veranda, Helvetica, sans-serif;
color: rgb(46, 113, 158);
font-weight: 400;
font-size: 12px;
text-align: center;
background-color: rgb(237, 248, 234);
padding: 25px 10px;
}
.d-region--border-bottom{border-bottom: 1px solid rgb(221, 235, 205);}
.d-region__info{display: none;position: absolute;}
input.d-region__btn:hover + div.d-region__info{
color: rgb(46, 113, 158);
font-family: Veranda, Helvetica, sans-serif;
background-color: rgb(255, 255, 255);
border: 2px solid rgb(225, 229, 320);
width: 275px;
margin: 0 auto;
margin-left: 3px;
display: inline;
z-index: 99;
font-size: 11px;
text-align: center;
border-radius: 3px;
padding: 15px 0px;
top: -50px;
}
input.d-region__btn:hover{background-color: rgb(212, 235, 246);cursor: pointer;}
div.d-region__contain < div.d-region__info:hover{background-color: rgb(212, 235, 246);}<div class="d-region d-region--width">
<div class="d-region__head">Pre-Formatted Regions</div>
<div class="d-region__contain d-region--border-bottom">
<input type="button" value="West" ID="West" class="d-region__btn"/>
<div class="d-region__info">AK, AZ, CA, CO, HI, ID, MT, NV, NM, OR, UT, WA, WY</div>
</div>
<div class="d-region__contain d-region--border-bottom">
<input type="button" value="NorthEast" ID="NorthEast" class="d-region__btn"/>
<div class="d-region__info">CT, ME, MA, NH, NJ, NY, PA, RI, VT</div>
</div>
<div class="d-region__contain d-region--border-bottom">
<input type="button" value="Mid Atlantic" ID="Mid Atlantic" class="d-region__btn"/>
<div class="d-region__info">DE, DC, MD, NJ, NY, PA, VA, WV</div>
</div>
<div class="d-region__contain d-region--border-bottom">
<input type="button" value="MidWest" ID="MidWest" class="d-region__btn"/>
<div class="d-region__info">IL, IN, IA, KS, MI, MN, MO, NE, ND, OH, SD, WI</div>
</div>
<div class="d-region__contain d-region--border-bottom">
<input type="button" value="South" ID="South" class="d-region__btn"/>
<div class="d-region__info">AL, AK, FL, GA, KY, LA, MS, NC, SC, TN, TX</div>
</div>
</div>
この方法は、FirefoxとSafariの両方で問題が修正されます。 Chromeは、両方のブラウザではなく、1つの位置（上端）のみを設定する場合、他のブラウザよりも寛大でなければなりません。 – thefromanguard
はい、クロムは、この問題を両方（上と下）に指定せずに処理できますが、他のブラウザのために両方を使用する必要があります。あなたはまた別の解決策を持っていますが、私の答えで言及することを忘れてしまいます。input.region__btn display：block;を入力することでこの問題を解決できます。 –