Question

出于某种原因，我的网站上的悬停效果似乎会在文本突出显示时移动。

以下是示例：

http://gyazo.com/165d4f93909770c14387e574420a3db8

我想知道是否有人可以帮助我这样做，以便在悬停效果突出显示时文字保持不变。

以下是导航栏的CSS：

    /*TOP NAV BAR SECTION*/
#nav_bar {
    background-color: #a22b2f;
    padding:1px;
    box-shadow: 0px 2px 10px;
    height:45px;
    }         
#nav_bar ul li {
    display: inline-block;
}
#nav_bar ul li a {
    color: white;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
}
#nav_bar ul li ul {
    display: none;
}
#nav_bar>ul>li>a:hover {
    background:#8c1b1f;
    padding-bottom:13px;
    padding-top:17px;
    padding-left:10px;
    padding-right:10px;   
}
#nav_bar>ul>li>ul>li>a:hover {
    background:#c9c9c9;
    padding-bottom:5px;
    padding-top:5px;
    padding-left:5px;
    padding-right:5px;

}
#nav_bar ul li:hover ul {
    display: block;
    position: absolute;
    padding: 0px;
    background: #e2e2e2;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:0px;
    padding-right:10px;
    border: 1px solid black;
    border-radius:5px;
    }#nav_bar ul li:hover ul li {
    display: block;`enter code here`
}
#nav_bar ul li:hover ul li a {
    color: black;
    font-size:14px;
    font-weight:normal;
    margin-left:-15px;

导航栏的HTML：

<!--TOP NAV BAR SECTION-->
            <div id="nav_bar">
                <ul>
                    <li><a href="index.html">HOME</a>
                    </li>
                    <li><a href="status.html">STATUS</a>
                    </li>
                    <li><a href="info.html">INFO</a>
                    </li>
                    <li><a href="#">GAMEMODES</a>

                        <ul>
                            <li><a href="survival.html">SURVIVAL</a>
                            </li>
                            <li><br><a href="pure-pvp.html">PURE-PVP</a>
                            </li>
                            <li><br><a href="gamesworld.html">GAMESWORLD</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="rules.html">RULES</a>

                    </li>
                    <li><a href="vote.html">VOTE</a>

                    </li>
                    <li><a href="contact.html">CONTACT</a>

                    </li>
                </ul>
            </div>

Answer 1

您在悬停时添加填充，如果内部元素的大小相同，则会使元素变大。将填充移动到未覆盖的元素，如

#nav_bar ul li a {
    color: white;
    padding-bottom:13px;
    padding-top:17px;
    padding-left:10px;
    padding-right:10px;   
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
}

这是一个小提琴http://jsfiddle.net/y803q0nr/

悬停效果移动文本

1 个答案: