I have a file that holds an array of navigation links, so that if I want to add a new link to the nav menu I can do it in one file rather than have to change multiple manually. However, each menu link (category) requires a different a:hover colour, but my current coding doesn't work.
Here's the file where the menu items are stored, along with the colour that should be the a:hover colour in a multi-indexed array (some are left blank):
<?php
$CATEGORIES = array(
array("culture", "#f9993c"),
array("nature", "#59AF56"),
array("science", "COLOUR"),
array("society", "COLOUR"),
array("technology", "COLOUR")
);
?>
Here's the file that prints the menu items:
<?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 " | ";
}
}
?>
I'm guessing you can't interchange a style like that, because all the links are coming out as "#59AF56" on mouseover, which is odd as that is the second colour in the multi-index array. Any help would be appreciated!
First of all css doesn't load after each element as you might think, the browser will use whatever rule that has the highest priority on all of your elements, what you could do is make use of inline css styling, but unfortunately :hover
isn't supporter so your last resort is basically javascript
<a
href="link.php"
onMouseOver="this.style.color='#FFF'"
onMouseOut="this.style.color='#000'"
>Text</a>
but the optimal way would be without any doubt be the use of classes, give every colortheme a class and add those classes to desired elements as needed.
You can set the categories as CSS classes on your links so that the resulting link looks like this, for example:
<a href="category.php?cat=culture" class="culture">CULTURE</a>
And then define CSS styles for each link class with the necessary colors (either by generating them in your PHP code or by defining them in a static CSS file. For example, for the culture link as in the above example:
#main_right_sub a.culture:hover
{
color: #f9993c;
}