html - CSS3 : Only the last class of my navigation is working

Question

所以我试图用 div 制作一个菜单，这样我就可以使用 :hover 并在你将鼠标悬停在每个按钮上时显示一个图像，我的每个链接的 html 是:

<div class="home homeTwo">
        <img src="images/homebanner.jpg" width="120"  alt="homebanner">
    <div class="homeMask"><a href="home.html" class="to2Page">Home</a>
    </div>
</div>

然后我的 Css 完成剩下的工作，所以:

 .home{
    width: 120px;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
}

.home .homeMask{
    width: 120px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.home img{
    display: block;
    position: relative;
}


.home a.to2Page{
    display: inline-block;
    text-decoration: none;
    color: #FFF;
    font-family:Verdana, Geneva, sans-serif;
}

.homeTwo img{
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}

.homeTwo .homeMask{
    transition: all 0.5s linear;
    opacity: 0;
    filter:alpha(opacity=0);
}  


.homeTwo a.to2Page{
    opacity:0;
    filter:alpha(opacity=0);
    transform: scale(0);
    transition: all 0.5s linear;
}

.homeTwo:hover img{
    transform: scale(10);
    opacity: 0; 
    filter:alpha(opacity=0);
}
.home:hover .homeTwo:hover{
    opacity: 1;
    filter:alpha(opacity=100);
}                                                                           

.homeTwo:hover a.to2Page{
    transform: scale(1);
    opacity: 1;
    filter:alpha(opacity=100);
}

我有 7 个额外的类做同样的事情，但只有最后一个有效。我做错了什么吗？

Answer 1

您还没有在 CSS 文件中定义类“home homeTwo”。 如果你删除你的第一个家就没事了。 你有这个。

<div class="home homeTwo">
        <img src="images/homebanner.jpg" width="120"  alt="homebanner">
    <div class="homeMask"><a href="home.html" class="to2Page">Home</a>
    </div>
</div>

应该是这样的:

<div class="homeTwo">
    <img src="images/homebanner.jpg" width="120"  alt="homebanner">
<div class="homeMask"><a href="home.html" class="to2Page">Home</a>
</div>