0
버튼 목록이 있습니다. 해당 목록에있는 버튼을 가리키면 버튼 위에 해당 지역의 상태 목록이 나타나기를 원합니다. 모든 것이 크롬에서 작동하지만 파이어 폭스와 사파리에서는 버튼이 위로 올려 졌을 때 상태 목록이 표시되지 않습니다. 배경색이 바뀌고 포인터가 바뀌지 만 어떤 이유로 든 정보 영역이 나타나지 않습니다. 형제 선택기 호버는 Chrome에서만 작동합니다.
나는 참고로이 게시물을 사용하고 내 선택기보다 구체적했지만 그것은 문제를 해결 didnt가 :.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>.class:hover not working in firefox? 내 버튼 HTML과 선택기 CSS입니다
이 방법은 폭스 사파리 모두에 문제를 해결. 크롬은 두 브라우저 모두 (위 및 왼쪽)가 아닌 한 위치 (위) 만 설정할 때 다른 브라우저보다 관대해야합니까? – thefromanguard
예, 크롬은 위와 왼쪽 모두 제공하지 않고이 문제를 처리 할 수 있지만 다른 브라우저 때문에 두 가지를 모두 사용해야합니다. 당신은 또 다른 해법을 가지고있다. 그러나 나는 그것을 나의 대답으로 언급하는 것을 잊는다 - input.region__btn display : block;을줌으로써이 문제를 해결할 수있다. –