0

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

我的链接和 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;}
4

3 回答 3

0

按以下顺序放置您的链接 css：

一个

一个：访问过

一：悬停

一个：活跃的

对于您的示例，此 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;}
于 2013-03-01T23:40:06.010 回答
0

@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/

于 2013-03-01T23:50:11.467 回答
0

将访问设置为显示在 CSS 中的链接之后。

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

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

于 2013-03-01T23:35:38.617 回答