0

我创建了一个使用 CSS 的基本 HTML 菜单。为简单起见，我在整个菜单中使用了“导航”类。但是，因为我使用了一个类，所以我不确定如何为活动页面制作新颜色的按钮。

基本上，当页面处于活动状态（页面上的用户）时，除了图像之外的所有内容都应该是新颜色。

这是我的代码：

    <!--nav-->
    <ul class="nav">
    <li class="nav"><a href="index.html" target="_self"><img class="nav" src="images/logo_sm.png" width="100" height="50" alt="Welcom to Comp Sale " /></a></li>
    <li class="nav"><a class="nav" href="index.html" target="_self">Home</a></li>
    <li class="nav"><a class="nav" href="Products.html" target="_self">Products</a>        </li>
    <li class="nav"><a class="nav" href="ShoppingCart.html" target="_self">Cart <img class="cart_t" src="images/cart.png" alt="cart.jpg"  /></a></li>
    </ul>
    <!--end nav-->

和CSS

/* nav */
ul.nav
{
    list-style:none;
    background-color:#999;
    border-top-right-radius:20px;
    border-top-left-radius:20px;
    width:1000px;
    height:70px;
    font-size:20px;
    margin:0px auto;
}
li.nav
{
    display:inline;
    margin:0px;
}
a.nav
{
    color:#000;
    background-color:#CCC;
    border-color:#999;
    border-style:outset;
    padding-left:45px;
    padding-right:45px;
    padding-top:10px;
    padding-bottom:10px;
    margin-left:10px;
    border-radius:15px;
    position:relative;
    bottom:20px;
    left:150px;
}
a.nav:hover
{
    background-color:#666;
    border-style:inset;
    color:#333;
    box-shadow: 0px 0px 20px #FFF;
    text-shadow:none;
}
img.nav
{

    border:none;
    margin-top:10px;
    position:relative;
    right:20px;
}
.cart_t
{
    border:none;
    position:relative;
    top:10px;
    left:15px;
}
ul li a:active
{
    background-color:#FF0000;
    font-size:33px;
}

/*end nav*/
4

1 回答 1

0

嗨，你在做什么是错误的。正如您class="nav"用于链接和列表项一样。这是非常错误的，你应该使用已经在使用的类名。使用这样的东西：

<li class="nav_li">
   <a class="nav_link" href="index.html" target="_self">
      <img class="nav_image" src="images/logo_sm.png" width="100" height="50" alt="Welcom to Comp Sale " />
   </a>
</li>

只是为了区分它们，这样就很容易为它们设置样式。

但是，您也可以使用它：li.nav a.nav ul.nav img.nav. 现在关于您的代码的主要内容是您没有指定图像链接应该具有哪些属性。试试这个：

a.nav img {
/* all the properties for that! */
}

这将尝试设置图像的属性。您可以使用background-color: #hexcode或color: #hexcode;。

但最好的方法仍然是使用不同的类名。

和

$(window).focus(function() { // jQuery

会为你做这项工作。在此函数中设置 CSS 属性。

于 2013-09-09T02:50:29.283 回答