Question

在我的网站上，我有一个导航栏，当我将鼠标悬停在它上面时，我希望将颜色更改为红色（现在我将其设置为黑色）。但是，当我将鼠标悬停在导航栏上时，CSS根本不做任何事情。

HTML：

    <div id="topNav">
        <ul class="nav">
<li class="home"><a href="<?php echo url('/'); ?>">Home</a></li>
<li><a href="<?php echo url('/about'); ?>">About Us</a></li>
<?php
if(!Auth::LoggedIn())
{
    // Show these if they haven't logged in yet
?>
    <li class="home"><a href="<?php echo url('/registration'); ?>">Careers</a></li>
<?php
}
else
{
    // Show these items only if they are logged in
?>
    <li><a href="<?php echo url('/profile'); ?>">Pilot Center</a></li>

<?php
}
?>
<li class="home"><a href="<?php echo url('/ops'); ?>">Operations</a></li>
<li class="home"><a href="<?php echo url('/forums'); ?>">Forums</a></li>
<li class="home"><a href="<?php echo url('/contact'); ?>">Contact Us</a></li>
<li><a href="<?php echo url('/acars') ?>">Live Map</a></li>
<?php echo $MODULE_NAV_INC;?>
<?php
if(Auth::LoggedIn())
{
    if(PilotGroups::group_has_perm(Auth::$usergroups, ACCESS_ADMIN))
    {
        echo '<li><a href="'.fileurl('/admin').'">Admin Center</a></li>';
    }
?>


<li><a href="<?php echo url('/logout'); ?>">Log Out</a></li>
<?php
}
        </ul>
    </div>

CSS：

#topNav { font-size: 14px; padding-top: 10px; width: 970px; margin: auto; height: 50px; background-color: #000; }

#topNav ul { margin: 0; padding: 0; list-style: none; margin: 0 auto; }
#topNav ul:hover { margin: 0; padding: 0; list-style: none; margin: 0 auto; }

#topNav ul li { height: 37px; float: left; padding: 0px; font: bold 12px/37px Arial, Helvetica, sans-serif; }
#topNav ul li:hover { height: 37px; float: left; padding: 0px; font: bold 12px/37px Arial, Helvetica, sans-serif; }

#topNav ul li a { padding: 0 18px; height: 37px; float: left; text-decoration: none; display: block; color: #ffffff; font: 14px/37px Arial, Helvetica, sans-serif; }
#topNav ul li a:hover { padding: 0 18px; height: 37px; float: left; text-decoration: none; display: block; color: #ffffff; font: 14px/37px Arial, Helvetica, sans-serif; }

.nav, .nav ul { list-style: none; margin: 0; padding: 0; }

.nav { font-family: Arial, Helvetica, sans-serif; z-index: 1000; position: relative; }
.nav li { float: left; margin: 0; padding: 0; position: relative; }
.nav li a, .nav li a:link, .nav li a:active, .nav li a:visited { font: bold 1.22em/25px Arial, Helvetica, sans-serif; color: #959595; display: block; padding: 0 9px; text-decoration: none; }

.nav ul { list-style: none; margin: 0; width: 150px; position: absolute; top: -999em; left: -1px; }
.nav ul li { border: 0; float: none; }
.nav ul a { padding-right: 20px; width: 150px; white-space: nowrap; }

Answer 1

看起来你错过了将实际设置为悬停的CSS。你需要像

这样的东西

#topNav:hover {background: red}

悬停功能无法正常运行或根本无法运行

1 个答案: