Question

看起来你们是对的。更改订单已解决问题。似乎很容易解决这个问题。感谢所有评论/帮助。

我的链接和css存在一些问题。以下是我的网站代码。我的问题是我有5个链接都使用相同的类。它们都显示正确，链接工作正常，但悬停和活动在第一次没有变化。最后三个工作正是他们应该做的。为什么是这样？到底是怎么回事？我删除了所有内容并重新输入。我尝试过不同的浏览器。删除了缓存。什么都没有。

HTML代码：

<tr bgcolor="#FFFFFF">
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_02.gif" width="57" height="51" alt=""></td>
  <td align="center" height="29"><a href="index.php" class="menu">Home</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_04.gif" width="41" height="51" alt=""></td>
  <td align="center" height="29"><a href="about.php" class="menu">About</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_06.gif" width="36" height="51" alt=""></td>
  <td align="center" height="29"><a href="products.php" class="menu">Products</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_08.gif" width="36" height="51" alt=""></td>
  <td align="center" height="29"><a href="recipes.php" class="menu">Recipes</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_10.gif" width="36" height="51" alt=""></td>
  <td align="center" height="29"><a href="contact.php" class="menu">Contact</a></td>
    <td rowspan="2">
        <img src="images/layout/header-menu/menu_12.gif" width="58" height="51" alt=""></td>

CSS代码：

a.menu:link {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

a.menu:hover {
color: #713010;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

a.menu:active {
color: #F9A22E;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

a.menu:visited {
color: #94AA45;
text-decoration: none;
font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: normal;}

Answer 1

将受访者设置为在CSS中链接后显示。

我记得的方式是：* L * o * V * e * HA * te

在我的浏览器中测试并在重新安排时工作。问题是您的访问样式与链接样式相同，并覆盖悬停（当您在index.php上时）

Answer 2

按以下顺序放置链接css：

a

一个：访问

：悬停

一个：活性

对于您的示例，此css应按预期工作：

    a.menu:link {
    color: #94AA45;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;}

    a.menu:visited {
    color: #94AA45;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;}


    a.menu:hover {
    color: #713010;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;}

    a.menu:active {
    color: #F9A22E;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;}

Answer 3

@Artur是对的，@ Guido也是。

您绝对不希望将表用于导航元素。

以下是我对您的代码所做的事情：

<强> HTML：

<div class="menu">
<td rowspan="2">
    <img src="images/layout/header-menu/menu_02.gif" width="57" height="51"
    alt="">
</td>
<td align="center" height="29"><a href="#" class="menu">Home</a>
</td>
<td rowspan="2">
    <img src="images/layout/header-menu/menu_04.gif" width="41" height="51"
    alt="">
</td>
<td align="center" height="29"><a href="#" class="menu">About</a>
</td>
<td rowspan="2">
    <img src="images/layout/header-menu/menu_06.gif" width="36" height="51"
    alt="">
</td>
<td align="center" height="29"><a href="#" class="menu">Products</a>
</td>
<td rowspan="2">
    <img src="images/layout/header-menu/menu_08.gif" width="36" height="51"
    alt="">
</td>
<td align="center" height="29"><a href="#" class="menu">Recipes</a>
</td>
<td rowspan="2">
    <img src="images/layout/header-menu/menu_10.gif" width="36" height="51"
    alt="">
</td>
<td align="center" height="29"><a href="#" class="menu">Contact</a>
</td>
<td rowspan="2">
    <img src="images/layout/header-menu/menu_12.gif" width="58" height="51"
    alt="">
</td>
</div>

<强> CSS：

  .menu a {
    color: #94AA45;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;
}
.menu a:visited {
    color: #94AA45;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;
}
.menu a:hover {
    color: #713010;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;
}
.menu a:active {
    color: #F9A22E;
    text-decoration: none;
    font-family: TektonPro-BoldExt-FF, TektonPro-BoldExt, Geneva, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;
}

我也为此做了一个小提琴：

http://jsfiddle.net/ultraloveninja/D5rUR/

CSS和链接的问题

3 个答案: