Hover effect not working

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ljCharlie
Forum Contributor
Posts: 289
Joined: Wed May 19, 2004 8:23 am

Hover effect not working

Post by ljCharlie »

Okay here's what I have.

On my CSS file I have this:

Code: Select all

A:link { color: #000066; text-decoration: underline; }
A:visited { color: #000066; text-decoration: underline; }
A:hover { color: #990000; text-decoration: underline; }
A:active { color: #000066; text-decoration: underline; }
A.subMenu:link { color: #FFFFFF; text-decoration: underline; }
A.subMenu:visited { color: #000066; text-decoration: underline; }
A.subMenu:hover { color: #FFFFFF; text-decoration: underline; }
A.subMenu:active { color: #990000; text-decoration: underline; }
Then on the body I used it this way:

Code: Select all

<?
echo "<a href=$self?sectionID=$sectID class='subMenu'>".$dscription."</a>";
?>
And it is not working. Any help is appreciated.

ljCharlie
User avatar
dethron
Forum Contributor
Posts: 370
Joined: Sat Apr 27, 2002 11:39 am
Location: Istanbul

Post by dethron »

Code: Select all

<?php
echo "<a href="$self?sectionID=$sectID" class="subMenu">".$dscription."</a>";
?>
User avatar
dethron
Forum Contributor
Posts: 370
Joined: Sat Apr 27, 2002 11:39 am
Location: Istanbul

Post by dethron »

and be sure $dscription is not null, if so it wont be visible to us.
User avatar
m3mn0n
PHP Evangelist
Posts: 3548
Joined: Tue Aug 13, 2002 3:35 pm
Location: Calgary, Canada

Post by m3mn0n »

Moved to Client Side.


Is $dscription supose to be that way? Sure it's not $description?
ljCharlie
Forum Contributor
Posts: 289
Joined: Wed May 19, 2004 8:23 am

Post by ljCharlie »

Many thanks for the help but still not working as I expected. Noticed that the submenu.hover color is different from the regular a.hover color. And if I specify the class in the <a href="#" class="submenu">home</a> I expect the color #FFFFFF to appear when the mouse is over the text "home". In the suggestion above, the color #FFFFFF doesn't show up when hovering over the texts, instead the color a.hover, which is #990000, shows up. I want to apply different hover color to different text menu.

ljCharlie
User avatar
dethron
Forum Contributor
Posts: 370
Joined: Sat Apr 27, 2002 11:39 am
Location: Istanbul

Post by dethron »

actually it is working as supposed to be...do not confused with link,visited,hover,active
change the $dscription to make link not visited.

it is a very simple thing, may be u need some rest ;)
ljCharlie
Forum Contributor
Posts: 289
Joined: Wed May 19, 2004 8:23 am

Post by ljCharlie »

I noticed something. If I use IE, nothing is working. The texts are all white. However, if I use Mozilla Firefox, the a.hover color, #990000, shows up instead of the submenu.hover color of white, #FFFFFF.

What's going on? Is it a browser problem?

What I wanted is, if it is simply a hyper texts link then I want the a.hover color of #990000 to show when mouse over as stated in the CSS file. However, when I specified the class to "submenu" I want the sumenu.hover of white, #FFFFFF to show up whem mouse over as is in the CSS file. But it's not doing this.

Here's the page http://www.uwstout.edu/alumni/alumnPhot ... n=archived

And here is the body tag that generates the menu texts.

Code: Select all

<?
	if ($btnClicked == "archived"){
		$numOfCells=1;
		$bgColor = "#05A1C4";
		$totoRows_rsRecords = $totalRows_rsArchived;
		$rsRecords = $rsArchived;
		}
	elseif ($btnClicked == "current"){
		$numOfCells=1;
		$bgColor = "#51af7b";
		$totoRows_rsRecords = $totalRows_rsCurrent;
		$rsRecords = $rsCurrent;
		}
	if ($totoRows_rsRecords >0){
		if ($numOfCells ==1){
			echo "<br>";			
			echo '<table width="620" border="0" cellpadding="0" cellspacing="0" bgcolor="'.$bgColor.'">';
			$numOfRows = 1;
			$numCellsFilled = 1;
			}
		while($row_rsRecords = mysql_fetch_assoc($rsRecords)){
			if ($numOfRows == 1){
				echo '<tr class="bodycopy">';
				$numOfRows = 0;
				}			
			$dscription = $row_rsRecords["description"];
			$sectID = $row_rsRecords["sectionID"];
			if ($numCellsFilled <= 2){
				echo "<td width='206' align='center'><a href=$self?sectionID=$sectID class='submenu'>".$dscription."</a></td>";
    			echo '<td width="1">|</td>';
				$numCellsFilled++;
				}
			elseif($numCellsFilled ==3){
				echo "<td width='206' align='center'><a href=$self?sectionID=$sectID class='submenu'>".$dscription."</a></td>";
				echo '</tr>';
				$numCellsFilled = 1;
				$numOfRows = 1;
				}
			}
		echo '</table>';
		}
?>
ljCharlie
ljCharlie
Forum Contributor
Posts: 289
Joined: Wed May 19, 2004 8:23 am

Post by ljCharlie »

I got something working now. It is the color of the link and hover that are the same that is why it's not working. It's now working under IE but it's not working in Mozilla browser. Any guess on this?

ljCharlie
User avatar
dethron
Forum Contributor
Posts: 370
Joined: Sat Apr 27, 2002 11:39 am
Location: Istanbul

Post by dethron »

hmm, yes you are right.
sorry but it is visual-stuff, (i hate it)

i hope following link will be helpfull for you.
http://www.w3schools.com/css/css_pseudo_classes.asp
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Post by zenabi »

Looking at your HTML source, your links still show up without the quotes:

Code: Select all

<a href=/alumni/alumnPhotoGallery.php?sectionID=1 class='submenu'>Appleton Gathering</a>
It should be:

Code: Select all

<a href='/alumni/alumnPhotoGallery.php?sectionID=1' class='submenu'>Appleton Gathering</a>
Notice the quotes around the URL.
d3ad1ysp0rk
Forum Donator
Posts: 1661
Joined: Mon Oct 20, 2003 8:31 pm
Location: Maine, USA

Post by d3ad1ysp0rk »

Code: Select all

A:link &#123; color: #000066; text-decoration: underline; &#125;
A:visited &#123; color: #000066; text-decoration: underline; &#125;
A:hover &#123; color: #990000; text-decoration: underline; &#125;
A:active &#123; color: #000066; text-decoration: underline; &#125;
.subMenu a:link &#123; color: #FFFFFF; text-decoration: underline; &#125;
.subMenu a:visited &#123; color: #000066; text-decoration: underline; &#125;
.subMenu a:hover &#123; color: #FFFFFF; text-decoration: underline; &#125;
.subMenu a:active &#123; color: #990000; text-decoration: underline; &#125;
Post Reply