Question

这是HTML

    <div class="songsdetails">
        <a href="#" id="c">
            <div class="col-lg-2">
                <div class="songsnumbers">
                    <span>1 -</span><br>
                </div>
            </div>                                  
            <div class="col-lg-8">
                <div class="songsname">
                    <span>Ay Putar Hattan Ty</span><br>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="songduration">
                    <span>4:56</span><br>
                </div>
            </div>
        </a>
            </div>

如果任何分区鼠标悬停，我希望我的标签中的所有类都能改变颜色。但它不起作用这里的css：

.songsdetails:hover songsnumbers songsname songsduration
{
color:black;
}

提前致谢。

Answer 1

由于您选择了类和分离，因此您缺少类选择器，因为这些基本上是3种不同的选择规则：

.songsdetails:hover .songsnumbers, 
.songsdetails:hover .songsname,
.songsdetails:hover .songsduration {
    color: black;
}

Answer 2

尝试以下CSS：

.songsdetails:hover .songsnumbers,
.songsdetails:hover .songsname, 
.songsdetails:hover .songduration {
    color: black;
}

您缺少点（引用类），也用逗号分隔它们：

.songsdetails:hover .songsnumbers,
.songsdetails:hover .songsname,
.songsdetails:hover .songduration {
  color: black;
}

<div class="songsdetails">
  <a href="#" id="c">
    <div class="col-lg-2">
      <div class="songsnumbers">
        <span>1 -</span>
        <br>
      </div>
    </div>
    <div class="col-lg-8">
      <div class="songsname">
        <span>Ay Putar Hattan Ty</span>
        <br>
      </div>
    </div>
    <div class="col-lg-2">
      <div class="songduration">
        <span>4:56</span>
        <br>
      </div>
    </div>
  </a>
</div>

Answer 3

你首先忘了正确地使用类选择器..他们的名字前面有一个'点'。

一个快速解决方案可以

.songsdetails:hover [class^=song]
{
color: black;
}

它的作用是什么.songsdetail的孩子，其名字以'song'开头会受到影响

悬停没有处理子div

3 个答案: