css - :hover over <div> does not apply to all its child elements -

i using angularjsjs create list ng-repeat directive. list contains 3 divs inside itself, layed out using floats. idea change background color of entire div whenever user moves mouse inside div's area. below code using:

html

        <div class="concert-item" ng-repeat="(key, concert) in value">           <div class="selfie item-float-left">             <img alt src="[[[concert.author.selfie]]]" class="img-circle"/>           </div>           <div class="item-float-left">             <p class="event-header">[[[concert.author.displayname]]]</p>             <p>[[[concert.venue]]]</p>             <p>[[[concert.dateinms | timefiltershort]]] @ [[[concert.begintimeshort]]]</p>           </div>               <div class="item-float-right">             <a href="https://maps.google.com/?q=[[[concert.street]]],[[[concert.zipcode]]]&output=classic" target="_blank">               <img alt src="{{static '/img/mapicon@50px.png'}}"/>             </a>           </div>           <div class="clear"></div>                       </div> 

css (less)

.concert-item :hover{     background-color: @light-gray-font-color; } 

with code, when user hovers on of div's children, background of child element modified. rest of div's area not affected :hover setting.

i appreciate can provide pointers how make whole div's area change background color when mouse moves inside point within div's area.

you need apply :hover actual parent div. if lose space in less looks this:

.concert-item:hover{     background-color: @light-gray-font-color; } 

it should work way want.