CODEWITHSUNDEEP
jqueryhtmlcss
ariel
ariel

Reputation: 3072

How do I remove a box-shadow effect from an element when another element is hovered?

Structure: 

 <div class="box">
      <div class="inner_box">
      </div>
 </div>

.inner_box has a box-shadow effect. When .box is hovered I want to remove shadow effect from .inner_box. Besides using JQuery, is there another way I can do this, preferably CSS3?

Please also show me examples of how i can do this in JQuery. Thanks!

Upvotes: 38

Views: 75289

Answers (4)

Atchutha rama reddy Karri
Atchutha rama reddy Karri

Reputation: 1569

Add this property on hover

color: none;

Upvotes: -2

Tomzan
Tomzan

Reputation: 2818

Here's a css only solution. 

.inner_box {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  box-shadow: 1px 1px 1px black;
}

.box:hover .inner_box {
  box-shadow: none;
}
<div class="box">
  <div class="inner_box">
  </div>
</div>

Upvotes: 14

Love Trivedi
Love Trivedi

Reputation: 4046

Just use this css this will work DEMO HERE

.box:hover .inner_box {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

Upvotes: 71

Mark
Mark

Reputation: 6865

You must reset the box-shadow back to its default state: none:

.box:hover .inner_box {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

Upvotes: 7

Related Questions