CODEWITHSUNDEEP
csshoverbox-shadow
ttgg
ttgg

Reputation: 13

Html element have double box-shadow effect?

I have this styling :

.col-md-6.active:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}
<div class="col-md-6 active" style="border: 0.5px solid; box-shadow: 5px  5px #99ccff;  border-radius: 5px; width: 500px; height:700px;margin-right:1px;float:left"></div>

But this hover effect is not having any effect , it wont show . How can i solve that ? Thanks in regards.

Upvotes: 0

Views: 337

Answers (4)

Wouter Vandevelde
Wouter Vandevelde

Reputation: 904

Inline css has a higher priority than the css added by your class. You can overwrite the css with !important.

.col-md-6.active:hover {
   box-shadow: 0 0 11px rgba(33,33,33,.2) !important;
}
<div class="col-md-6 active" style="border: 0.5px solid; box-shadow: 5px 5px #99ccff; border-radius: 5px; width: 500px; height:700px; margin-right:1px; float:left">
</div

Note, another and cleaner fix would be to move your inline css to a class.

Upvotes: 1

Renzo Calla
Renzo Calla

Reputation: 7696

You are not seeing the Hover effect due to css specificity your inline box shadows have priority, over the css :hover rules...

to fix it use !important or remove those role from your inline style

.col-md-6.active:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2) !important; 
}
<div class="col-md-6 active" style="border: 0.5px solid; box-shadow: 5px  5px #99ccff;  border-radius: 5px; width: 500px; height:700px;margin-right:1px;float:left">

Upvotes: 1

A. Nillmaier
A. Nillmaier

Reputation: 11

You just need to put your inline styles in the css file like this.

.col-md-6.active {
  border: 0.5px solid  ;
  box-shadow: 5px  5px #99ccff;  
  border-radius: 5px; 
  width: 500px; 
  height:700px;
  margin-right:1px;
  float:left
}
.col-md-6.active:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}
<div class="col-md-6 active"></div>

Upvotes: 1

VilleKoo
VilleKoo

Reputation: 2854

Do your styling in css, not inline.

.col-md-6.active{
  border: 0.5px solid;
  box-shadow: 5px  5px #99ccff;
  border-radius: 5px; 
  width: 500px; 
  height:700px;
  margin-right:1px;
  float:left
}
.col-md-6.active:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
  }
<div class="col-md-6 active"></div>

Upvotes: 1

Related Questions