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

Question

我正在使用 angularjsJS 通过 ng-repeat 指令创建一个列表。此列表本身包含 3 个 div，它们使用 float 布局。这个想法是当用户在 div 区域内移动鼠标时改变整个 div 的背景颜色。下面是我正在使用的代码:

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(较少)

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

使用此代码，当用户将鼠标悬停在任何 div 的子元素上时，只会修改该子元素的背景。 div 的其余区域不受 :hover 设置的影响。

如果有人可以提供任何有关如何在鼠标移动到 div 区域内的任何点内时使整个 div 区域更改其背景颜色的指示，我将不胜感激。

Answer 1

您需要将 :hover 应用于实际的父 div。如果你在 LESS 中丢失了空间，那么它看起来像这样:

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

它应该按照您想要的方式工作。