CSS/PHP改变悬停的颜色链接 - CSS/PHP Changing Hover Colour Links

CSS/PHP Changing Hover Colour Links

本文关键字：颜色链接悬停改变 PHP CSS | 更新日期: 2023-09-27

我有一个保存导航链接数组的文件，这样，如果我想向导航菜单添加一个新链接，我可以在一个文件中完成，而不必手动更改多个。然而，每个菜单链接(类别)需要不同的a:hover颜色，但我目前的编码不起作用。

下面是存储菜单项的文件，以及在多索引数组中应该是a:hover颜色的颜色(有些是空的):

<?php
$CATEGORIES = array(
    array("culture", "#f9993c"),
    array("nature", "#59AF56"),
    array("science", "COLOUR"),
    array("society", "COLOUR"),
    array("technology", "COLOUR")
    );
?>

下面是打印菜单项的文件:

<?php
$count_categories = count($CATEGORIES);
$incr_categories = 0;
while($incr_categories != $count_categories) {
    // Change main_right_sub a:hover
    echo "<style>#main_right_sub a:hover { color: ".$CATEGORIES[$incr_categories][1]."; } </style>";
    // Print Nav Items
    echo "<a href='category.php?cat?=".$CATEGORIES[$incr_categories][0]."'>".strtoupper($CATEGORIES[$incr_categories][0])."</a>";
    // Increment Count
    $incr_categories++;
    if ($incr_categories != $count_categories) {
        echo "&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;";
    }
}
?>

我猜你不能交换这样的风格，因为所有的链接都出来为"#59AF56"鼠标悬停，这是奇怪的，因为这是第二种颜色在多索引数组。任何帮助将不胜感激!

您可以将类别设置为链接上的CSS类，以便生成的链接看起来像这样，例如:

<a href="category.php?cat=culture" class="culture">CULTURE</a>

然后用必要的颜色为每个链接类定义CSS样式(通过在PHP代码中生成它们或通过在静态CSS文件中定义它们)。例如，对于culture链接，如上例所示:

#main_right_sub a.culture:hover
{
    color: #f9993c;
}

首先，css不会像你想象的那样在每个元素之后加载，浏览器会使用所有元素上具有最高优先级的规则，你可以做的是使用内联css样式，但不幸的是:hover不支持所以你最后的手段基本上是javascript

<a
   href="link.php"
   onMouseOver="this.style.color='#FFF'"
   onMouseOut="this.style.color='#000'"
>Text</a>

，但最优的方法无疑是使用类，给每个colortheme一个类，并根据需要将这些类添加到所需的元素