Question

所以我用div制作了这个顶级菜单，因为这个人想要盒子，并且无论文本如何都希望它们具有完全相同的大小。它看起来很好，但不会激活属性或悬停。请帮忙。

css是

.headerbottomcontainer {
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    min-height: 78px;
    border: 1px dotted #27c3ed;
}

.headerbottomleft {
    width: 290px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px dotted #F36;
    min-height: 66px;
}

.headerbottomright {
    width: 640px;
    margin-left: 15px;
    min-height: 66px;
    float: left;
    border: 1px dotted #27c3ed;
}


.headerbottomrighttop {
    height: 28px;  /*Change to 30 when remove borders*/
    width: 100%;
    border: 1px dotted #093;
}

.headerbottomrightbottom {
    height: 28px;  /*Change to 30 when remove borders*/
    width: 100%;
    margin-top: 10px;
    border: 1px dotted #C60;
    }

.navbuttonfirst {
    width: 122px;
    height: 16px; /*Change to 30 when remove borders*/
    font-size: 16px;
    color: #fff;
    border: 1px solid #f00;
    float: left;    
    text-align: center;
    padding-top: 5px;
    padding-bottom: 7px;
    border-radius: 3px;

}

.navbutton {
    margin-left: 5px;
    width: 122px;
    height: 16px; /*Change to 30 when remove borders*/
    font-size: 16px;
    color: #fff;
    border: 1px solid #f00;
    float: left;    
    text-align: center;
    padding-top: 5px;
    padding-bottom: 7px;
    border-radius: 3px;
}

.navbutton:hover{
    background-color:#f00;
}

HTML IS

    <div class="headerbottomcontainer">
        <div class="headerbottomleft">
        </div>

        <div class="headerbottomright">
            <div class="headerbottomrighttop">

                <div class="navbuttonfirst">
                    <a href="http://www.jetnightclub.com/events.html">Events</a>
                </div>
                <div class="navbutton">
                <a href="photos.html">Photos</a>
                </div>
                <div class="navbutton">
                    <a href="videos.html">Videos</a>
                </div>
                <div class="navbutton">
                    <a href="ourclub.html">Club Info</a>
                </div>
                <div class="navbutton">
                    <a href="contact.html">Contact</a>
                </div>

            </div>

            <div class="headerbottomrightbottom">
                <div class="navbuttonfirst">
                    <a href="birthdays.html">Birthdays</a>
                </div>
                <div class="navbutton">
                    <a href="barhop.html">Bar Hop</a>
                </div>
                <div class="navbutton">
                    <a href="newyears2013-2014.html">New Year's</a>
                </div>
                <div class="navbutton">
                    In the mix
                </div>
                <div class="navbutton">
                    Downloads
                </div>
            </div>
        </div>
    </div>

Answer 1

尝试

.navbutton：悬停{ 背景色：＃FF0000; }

.navbuttonfirst：悬停{ 背景色：＃FF0000; }

放入内部即...... 你必须像这样添加悬停效果。原谅我的颜色选择。

Answer 2

您可以添加a:hover或特定班级.classname:hover

吗？

 a:hover{

     color:red; 
 }

未访问，访问，悬停和活动链接的CSS，

a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}

Answer 3

您可以使用以下代码..

.navbuttonfirst a {
    width: 122px;
    height: 16px; /*Change to 30 when remove borders*/
    font-size: 16px;
    color: #fff;
    border: 1px solid #f00;
    float: left;    
    text-align: center;
    padding-top: 5px;
    padding-bottom: 7px;
    border-radius: 3px;

}

.navbutton a{
    margin-left: 5px;
    width: 122px;
    height: 16px; /*Change to 30 when remove borders*/
    font-size: 16px;
    color: #fff;
    border: 1px solid #f00;
    float: left;    
    text-align: center;
    padding-top: 5px;
    padding-bottom: 7px;
    border-radius: 3px;
}

.navbutton a:hover{
    background-color:#f00;
}

我的<a> not working and neither is the hover property</a>

3 个答案: