同级选择器悬停仅适用于 Chrome

Question

我有一个按钮列表。当该列表中的按钮悬停时，我希望该区域的状态列表显示在该按钮上。在 chrome 中一切正常，但在 firefox 和 safari 中，当按钮悬停时状态列表不会出现。背景颜色变了，指针变了，但出于某种原因，信息 div 不会出现。

我使用这个 post 作为参考并使我的选择器更加具体，但它没有解决问题：.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>

Answer 1

您应该将 left:0; 添加到 input.d-region__btn:hover + div.d-region__info

.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;
  left:0;

}



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>

Answer 2

使用 div 而不是输入，它工作正常。

https://jsfiddle.net/mept66L5/

 <div class="d-region__contain d-region--border-bottom">
        <div ID="NorthEast" class="d-region__btn">NorthEast</div>
        <div class="d-region__info">CT, ME, MA, NH, NJ, NY, PA, RI, VT</div>
 </div>

同级选择器悬停仅适用于 Chrome

Sibling Selector Hover only works in Chrome

html

css

hover

css-selectors