Apply "hover" box-shadow only to the container

Question

I want to create a Card component in React and CSS that already has a shadow, but on hover it gets shadow-er.

I added box-shadow to the container css but it seems to be applied only to its children. Is there a way to shadow only the card-container and not its children? For example on hover the two p elements get their own shadow, which I don't want.

this is the card structure in card render function

<div className={"card-container"}>
  <div className="card-title">{this.state.title}</div>
  <div className="card-children">{this.state.children}</div>
  <div className="card-body">
    <p> text line one </p>
    <p> text line two </p>
  </div>
</div>

and this is the card css

.card-container {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Card look */
  transition: 0.3s;
  background-color: white;
  border-radius: 4px; /* Round corners */
  border-left: 5px solid #5f37ff; /* Blue left border */
}

.card-container:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

More complete CodeSnippet

remove space https://codesandbox.io/s/cardshadow-react-css-rc875 — Ashish Patel, Nov 06 '19 at 09:46

score 4 · Accepted Answer · answered Nov 06 '19 at 09:41

4

you need to remove space of :hover .card-container:hover try this

answered Nov 06 '19 at 09:41

Shayan Moghadam

1,860
2
10
19

works! Is this some kind of rule? space=children elements, no space=element itself? – leverglowh Nov 06 '19 at 09:44
1

you can also apply `hover` to parent `div` ```.App:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }``` https://codesandbox.io/s/so-58727013-h8hxy – blueseal Nov 06 '19 at 09:45
yeah with space you select the children of element and what you did was like .card-container *:hover that means all of .card-container childrens – Shayan Moghadam Nov 06 '19 at 09:47

score 2 · Answer 2 · answered Nov 06 '19 at 09:45

You've got your selector wrong

.card-container :hover
               ^

The space between .card-container and :hover means that the style will be applied on the elements inside the .card-container

Removing the space will give

.card-container:hover

Which applies the style when you hover the .card-container

.App {
  font-family: sans-serif;
  text-align: center;
}

.card-title {
  font: 20px arial, sans-serif;
  text-align: left;
  padding: 0px 5px 5px 5px;
}

.card-container {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  /* Card look */
  transition: 0.3s;
  background-color: white;
  border-radius: 4px;
  /* Round corners */
  border-left: 5px solid #5f37ff;
  /* Blue left border */
}

.card-container:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card-body {
  text-align: left;
  padding: 10px 16px;
}

<div class="App">
  <div class="card-container">
    <div class="card-title">card title</div>
    <div class="card-children">
      <form class="nameform"><label>Name: &nbsp;<input type="text">&nbsp;</label><input type="submit" disabled="" value="Submit">
        <div class="input-check">
          <div style="color: red;">Has at least eight characters</div>
        </div>
      </form>
    </div>
    <div class="card-body">
      <p> text line one </p>
      <p> text line two </p>
    </div>
  </div>
</div>

Apply "hover" box-shadow only to the container

2 Answers2