CODEWITHSUNDEEP
htmlcsscss-selectorshover
Michael J Caboose
Michael J Caboose

Reputation: 191

Sibling Selector Hover only works in Chrome

I have a button list. When a button in that list is hovered over, I want a list of states for that region to appear over the button. Everything works in chrome, but in firefox and safari the list of states doesn't appear when the button is hovered over. The background changes color, the pointer changes, but for whatever reason the info div wont appear.

I used this post as a reference and made my selectors more specific but it didnt fix the issue: .class:hover not working in firefox?

Here is my button html and the selector 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>

Upvotes: 0

Views: 48

Answers (2)

Daniel Forbes
Daniel Forbes

Reputation: 624

Use a div instead of a input and it works fine.

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>

Upvotes: 1

Ahmed Salama
Ahmed Salama

Reputation: 2825

You should add left:0; to 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>

Upvotes: 1

Related Questions