9-5x aero 9-5x aero - 4 years ago 116
CSS Question

CSS: Stacked div elements, when hover only the hovered div gets border

I have some stacked div elements. On hover each of them gets border.

Now when I hover div, the hovered one, and its parent div are getting borders.

JS Fiddle

<div class="container">
<div class="button1">
<div class="button11">
<div class="button12"></div>
</div>
</div>
</div>


I cannot manage to create the following:

When a div is hovered only the hovered div must get border?

Thanks in advance.

Answer Source

Use absolute positioning and place your divs inside a relatively positioned element. Here's the updated fiddle...

https://jsfiddle.net/zekw31gq/4/

HTML

<div id="container">
  <div id="red"></div>
  <div id="blue"></div>
  <div id="black"></div>
</div>

CSS

#container {
  position: relative;
  width:300px;
  height:300px;
}
#red {
  position: absolute;
  width:300px;
  height:300px;
  background:red;
  border: 4px solid transparent;
}
#blue {
  position: absolute;
  margin:25px;
  width:250px;
  height:250px;
  background:blue;
  border: 4px solid transparent;
}
#black {
  position: absolute;
  margin:50px;
  width:200px;
  height:200px;
  background:black;
  border: 4px solid transparent;
}
#red:hover {
  border-color: darkred;
}
#blue:hover {
  border-color: darkblue;
}
#black:hover {
  border-color: white;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download