Question

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

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

这是我的代码：

    <!--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*/

Answer 1

你所做的是某种错误。当您对链接和列表项使用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属性。

CSS使用类更改所选链接的颜色

1 个答案: