css - 制作一个 div 链接并在悬停时更改内容

Question

我正在尝试将一个 div 设为一个链接，这很有效，但不确定我是否做对了。但我也希望 div 中的类型改变颜色。任何人都可以帮助我，如果你解释一下，我会很高兴 :D 努力学习 :)

这是html

    <div class="song_feature">
        <a href="#"></a>
        <div class="song_feature_content">
            <div class="break32"></div>
            <h1>1</h1>
            <div class="break10"></div>
            <div class="break45"></div>
            <h2>Lorem ipsum title</h2>
            <div class="break10"></div>
            <p>lorem ipsum</p>
        </div>
    </div>

还有CSS

.song_feature:hover {
background-color: #B5B5B5;
cursor: pointer;
}

Answer 1

只需在您的 CSS 中尝试一下:

.song_feature:link {
  background-color: #000;
  cursor: pointer;
}
.song_feature:visited {
  background-color: #000;
  cursor: pointer;
}
.song_feature:hover {
  background-color: #B5B5B5;
  cursor: pointer;
}
.song_feature:active {
  background-color: #000;
  cursor: pointer;
}

背景颜色将是黑色，直到鼠标悬停在它上面。只需相应地更改颜色即可。