CSS div hover affect child elements instead of the div

Question

So I am testing out a product card layout and I am trying to make the box shadow effect appear when I hover over the product card. But the hover function only affects the div Product-Card hov's child elements instead of the actual div itself. How do I fix it? Any help is much appreciated.

.Product-Card{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 8px;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.hov{
  margin: 0 4px 16px;
  border-radius: 4px;
}

.hov :hover{
  box-shadow: 0 4px 12px 0 rgb(44 44 45 / 7%), 0 0 20px 0 rgb(44 44 45 / 7%);
}

<div class="Product-Card hov">
  <div class="Item-Layout">
     <div class="img-box">
        <img src="1.jpg">
     </div>
     <div class="content">
        <div class="product-name">
           <p> Testing <p>
        </div>
        <div class="Price">
           <p>$10.40<p>
        </div>
     </div>
  </div>
</div>

remove the space befor `:hover` – Temani Afif Jan 05 '22 at 10:23 — Temani Afif, Jan 05 '22 at 10:23
To apply hover on `.hov` you must use selector `.hov:hover` – Justinas Jan 05 '22 at 10:24 — Justinas, Jan 05 '22 at 10:24

score 0 · Answer 1 · answered Jan 05 '22 at 10:23

You need to fix your selector .hov:hover.

A space between the two means :hover on any child of .hov

.Product-Card {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 8px;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.hov {
  margin: 0 4px 16px;
  border-radius: 4px;
}

.hov:hover {
  box-shadow: 0 4px 12px 0 rgb(44 44 45 / 7%), 0 0 20px 0 rgb(44 44 45 / 7%);
}

<div class="Product-Card hov">
  <div class="Item-Layout">
    <div class="img-box">
      <img src="1.jpg">
    </div>
    <div class="content">
      <div class="product-name">
        <p> Testing
          <p>
      </div>
      <div class="Price">
        <p>$10.40
          <p>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jan 05 '22 at 10:24

remove space between .hov:hover

.Product-Card{
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  flex-shrink: 0;
  justify-content: space-between;
  padding: 8px;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}

.hov{
  margin: 0 4px 16px;
  border-radius: 4px;
}

.hov:hover{
  box-shadow: 0 4px 12px 0 rgb(44 44 45 / 7%), 0 0 20px 0 rgb(44 44 45 / 7%);
}

<div class="Product-Card hov">
  <div class="Item-Layout">
     <div class="img-box">
        <img src="1.jpg">
     </div>
     <div class="content">
        <div class="product-name">
           <p> Testing <p>
        </div>
        <div class="Price">
           <p>$10.40<p>
        </div>
     </div>
  </div>
</div>

CSS div hover affect child elements instead of the div

2 Answers2