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

你还没有定义班级＆＃34; home homeTwo＆＃34;在你的CSS文件中.. 如果你删除你的第一个家庭就没关系了。你有这个。

<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>

CSS3：只有导航的最后一个类正在运行

1 个答案: