html - 使用伪类作为普通类

Question

我的页面上有一些不同的导航框，f.e. #home、#about 等和每个类的 :hover 类(更改背景)

#home {
    background-image: url(images/home.jpg);
}

#home:hover {
   background-image: url(images/home_hover.jpg); 
}

所以现在，如果选择了页面，我想将悬停图像用作标准图像。 F.e.如果我在“主页”页面上，我希望该框默认显示悬停图像而不是正常显示。有没有办法选择类 <div id="home:hover">还是类似的东西？

附言为每个盒子添加一个新类会花费很多时间，因为我得到了很多。

Answer 1

我会在 div 上放置一个(通用)类是当前页面 - 所以 <div id="home" class="current"> - 并有像这样的 CSS:

#home:hover, #home.current {
   background-image: url(images/home_hover.jpg); 
}