CODEWITHSUNDEEP
htmlcss
paugito
paugito

Reputation: 9

How do I keep the child elements from inheriting the main container's hover element

I am trying to add some pizzaz on the div element that contain the product's image div, sku div, and price div. When I add a hover effect on to the main container, the child divs inherit it as well and have a separate hover effect on each of the child divs.

HTML for the each main container

<div class="maincontainer">
    <div class="imgbox" >
        <img src="G-Shock.png" alt="gshock">
    </div>
    <div class="skubox">
        <p>
            G-Shock Watch
        </p>
    </div>
    <div class="pricebox">
        <p>
            $500.00
        </p>
    </div>
</div>

CSS for main container and it's children

.maincontainer{
   width:350px; 
   position: relative;
   padding:2%;
   flex-grow:1;
   flex-basis:16%;

}
.imgbox{
    height:218px;
    width:218px;
    margin:0 auto;

}
.skubox{
    height:72px;
    width:160px;
    margin:0 auto;
    text-align:center;
    position:relative;
    padding-top:1px;
}
.pricebox{
    height:22px;
    width:80px;
    margin:0 auto;
    text-align:center;
    position:relative;
    padding-top:1px; 
}
p{
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
    top:50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    font-size:13px;
}
.maincontainer :hover{
    box-shadow: 0 0 11px;
}

Upvotes: 1

Views: 42

Answers (1)

Michael Rodriguez
Michael Rodriguez

Reputation: 2176

That's happening because you have a space between the class selector .maincontainer and the pseudoselector :hover, which means "any child of maincontainer's hover style". Remove that space and problem solved. See this:

.maincontainer {
  width: 350px;
  position: relative;
  padding: 2%;
  flex-grow: 1;
  flex-basis: 16%;
}

.imgbox {
  height: 218px;
  width: 218px;
  margin: 0 auto;
}

.skubox {
  height: 72px;
  width: 160px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding-top: 1px;
}

.pricebox {
  height: 22px;
  width: 80px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding-top: 1px;
}

p {
  margin: 0;
  padding: 0;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 13px;
}

.maincontainer:hover {
  box-shadow: 0 0 11px;
}
<div class="maincontainer">
  <div class="imgbox">
    <img src="G-Shock.png" alt="gshock">
  </div>
  <div class="skubox">
    <p>
      G-Shock Watch
    </p>
  </div>
  <div class="pricebox">
    <p>
      $500.00
    </p>
  </div>
</div>

Upvotes: 1

Related Questions