0
我有一個按鈕列表。當該列表中的按鈕懸停時，我需要該按鈕上出現該區域的狀態列表。一切工作在鉻，但在Firefox和Safari瀏覽器的狀態列表不會出現時，按鈕懸停。背景改變顏色，指針改變，但不管出於什麼原因信息div不會出現。同級選擇器懸停只適用於Chrome
我用這篇文章作爲參考，讓我選擇更具體，但它並沒有解決這個問題：.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必須比其他瀏覽器更寬鬆？ – thefromanguard
是的，鉻可以處理這個問題，而不會給它兩個（頂部和左側），但你應該使用這兩者，因爲其他瀏覽器。你也有另一個解決方案，但我忘了在我的答案中提到它 - 你可以通過給你的input.region__btn顯示：block來解決這個問題。 –