Question

我正在使用angularjsJS创建一个带有ng-repeat指令的列表。此列表本身包含3个div，它们使用浮点数进行布局。这个想法是每当用户将鼠标移动到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;
}

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

：将鼠标悬停在<div>上不适用于其所有子元素

1 个答案: