Greetings I do not quite understand the logic of triggering: hover at the collapsed parent (when all the elements are inside float:left ). Tell me why this effect occurs? Example here, and on jsfiddle

https://jsfiddle.net/tayhatsu/a8k5jq4p/

 .parent { background-color: red; } .parent:hover .child { opacity: .5; } .child { height: 100px; width: 100px; display: inline-block; float: left; background-color: green; margin: 20px; } .child:hover { opacity: 1 !important; } 
 <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

  • and what does display:float; ? - user33274
  • wrong, meant float: left or float:right - Nermo
  • ahh and I thought that something had changed in the w3.org specification - user33274

1 answer 1

Hey. Everything is very logical - the parent .parent, though collapsed, is still there. When you point to a child element (it doesn't matter if the parent collapses) or not, the styles are applied to the parent: .parent: hover and, accordingly, the styles to .child: hover.

At the same time, if you hover the cursor between the blocks, then: hover will not work. This happens because the parent has .parent with children with a given float height = 0 and, accordingly, the cursor does not hit it, but gets only when you hover on children.

It was a bit messy, but I hope that I explained clearly))