使用 CSS 和 PHP 导航 - 基于图像的悬停菜单 (jQuery）

我有一个基于图像的菜单（例如，一个黄色和一个蓝色）。 我在Illustrator中设计了按钮，然后转换为PNG文件。 现在，我正在使用CSS来悬停影响。

因此，当我将鼠标悬停在图像上时，它会发生变化。 所以这很好（因为它有效），但它远非完美（这就是我在这里的原因）......我在CSS中的一个按钮看起来像这样：

.home_menu, .about_menu, .video_menu, .demo_menu, .contact_menu {
    float: left;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-left: 10px;
    width: 100px;
    height: 34px;
    display: block;
}
.home_menu {        
    background: transparent url('../images/buttons/home_but.png');
}
.home_menu:hover {
    background-image: url('../images/buttons/home_but_hov.png');
}

HTML 就像一开始是这样的：

<div id="main_menu">
    <a href="index.php" class="home_menu" title="Home"></a>
    <a href="index.php/about" class="about_menu" title="About"></a>
    <a href="index.php/videos" class="video_menu" title="Videos"></a>
    <a href="index.php/demo" class="demo_menu" title="Demo"></a>
    <a href="index.php/contact" class="contact_menu" title="Contact"></a>
</div>

所以基本上我正在更改每个类的 CSS 背景图像。

两个问题。 首先，我试图让每个菜单在该页面上都是蓝色版本。 所以我写了一个PHP函数来做到这一点（在一个类中），以防万一我想避免JavaScript。 它看起来像这样：

// Display table and loop through links and images from array
public function print_navigation($image_dir, $ds, $page_nav, $page_nav_alt, $menu) {
    $current_file = explode('/', $_SERVER['PHP_SELF']);
    $current_page = $current_file[count($current_file) - 1];
    $current_page;
    //$i = 0;
    foreach ($page_nav as $key => $value) {
        $menu_output .= '<a href="';
        $menu_output .= $key;
        $menu_output .= '" id="';
        $menu_output .= $menu[$key];
        $menu_output .= '" style="background: transparent url(';
        if ($current_page == $key) {
            $menu_output .= $image_dir . $ds . $page_nav_alt[$key];
        }
        else {
            $menu_output .= $image_dir . $ds . $page_nav[$key];
        }
        $menu_output .= ');"';
        $menu_output .= '></a>';
        $i++;
    }
    echo $menu_output; 
}

它似乎适用于主页（$home变量），但不适用于其他页面。 我有这样的变量（另一个文件中的数组和变量，为简洁起见被截断）：

$menu = array(
    $home => 'home_menu',
    ...);
$page_nav_ylw = array(
    $home => $home_but_ylw,
    ...);
$page_nav_blu = array(
    $home => $home_but_blu,
    ...);

然后我把所有图像都放在变量中，在数组中引用，例如，$home_but_ylw引用该按钮的 PNG。

PHP 函数有点奇怪，因为我将$key用于两个数组，我确信这很糟糕。 但是我很难让它在其他方面工作。

第二个问题是：有什么理由我不能在此基础上添加JavaScript（如jQuery）以获得悬停效果，以便我可以将其从CSS中删除？ 理想情况下，我想用一个PHP循环显示按钮，该循环也处理当前页面，然后使用jQuery进行悬停效果。

对不起，长帖子。 希望这是有道理的。

提前感谢！