Archief - CSS/javascript : achtergrondkleur verandert niet bij onmouseover

verdeye · 23 jul 2005

'k heb een menutje gemaakt waarbij de background color van een een tabel veranderd als je een mouseover doet. Nu dit verloopt perfect, tot ik met css mijn links (dus de tekst) instel, dan veranderen de kleuren van mijn tekst niet mee, het lijkt alsof de style van mijn links een hogere prioriteit heeft dan mijn mouseover.

pagina

Code voor mouseover:

PHP:

        <td class="navigatie" onMouseOver="style.backgroundColor='#333366'; style.color='white';" onMouseOut="style.backgroundColor='#CCCCCC'; style.color='#333366';"><a class="nav" href="?">Home</a></td>
        <td class="navigatie" onMouseOver="style.backgroundColor='#333366'; style.color='white';" onMouseOut="style.backgroundColor='#CCCCCC'; style.color='#333366';">Wie ? </td>
        <td class="navigatie" onMouseOver="style.backgroundColor='#333366'; style.color='white';" onMouseOut="style.backgroundColor='#CCCCCC'; style.color='#333366';">Wat ? </td>
        <td class="navigatie" onMouseOver="style.backgroundColor='#333366'; style.color='white';" onMouseOut="style.backgroundColor='#CCCCCC'; style.color='#333366';">Portfolio</td>
        <td class="navigatie" onMouseOver="style.backgroundColor='#333366'; style.color='white';" onMouseOut="style.backgroundColor='#CCCCCC'; style.color='#333366';">Links</td>

Code van navigatie class, en nav link class:

PHP:

.navigatie
{
	background-color: #CCCCCC;
	width: 20%;
	border: 1px white solid;
	margin-left: 0px;
	margin-right: 0px;	
}
a.nav:link
{
	text-decoration: none;
}
a.nav:visited
{
	text-decoration: none;
}
a.nav:active
{
	color: white;
	text-decoration: none;
}
a.nav:hover
{
	color: white;
	text-decoration: none;
}

als iemand een idee heeft wat dit veroorzaakt ? ik heb ookal in de css van navigatie bij link en visited color:white; gezet, maar dan verloopt het ook niet naar wens.
anyway thx.

servi · 23 jul 2005

moderator noot :
je topic bevat geen prefix, een verkeerd prefix of heeft een onduidelijke titel.
Gelieve een duidelijke titel met een bijhorend correct prefix te gebruiken.
Voor meer informatie over prefixen kan je terecht op regels en prefixen !!!.
Je topic is aangepast en je hebt een een waarschuwing gekregen, gelieve in het vervolg er op te letten.

Lashknife · 23 jul 2005

this.style.color

ge vergeet bij de onmouseover om uw eigen object aan te spreken.

verdeye · 23 jul 2005

doesn't solves the prob.

Lashknife · 23 jul 2005

zet het ff online dan plz want uit fragmentjes kan ik niets afleiden of fixen (en de link in uw post geeft hier een gateway timeout)

verdeye · 23 jul 2005

http://213.118.124.247:8080//index.php

PHP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>verdeyen.info - CheapAss Webdesign</title>
<meta http-equiv="Description" content="Verdeyen dot info biedt zeer goedkoop webdesign aan. Voor zowel statische al dynamische websites.">
<meta http-equiv="Keywords" content="webdesign, verdeyen.info,php, mysql, database, design, webhosting">
<meta http-equiv="Reply-to" content="[email protected]">
<meta http-equiv="Expires" content="doesn't expires">
<link href="style/style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div align="center">
<table cellspacing="0" id="table">
  <tr>
    <td id="table_banner">&nbsp; </td>
  </tr>
  <tr>
    <td id="table_top">&nbsp;</td>
  </tr>
  <tr>
    <td> <table id="menu">
      <tr>
        <td class="navigatie" onMouseOver="this.style.backgroundColor='#333366'; this.style.color='white';" onMouseOut="this.style.backgroundColor='#CCCCCC'; this.style.color='#333366';"><a class="nav" href="?">Home</a></td>
        <td class="navigatie" onMouseOver="this.style.backgroundColor='#333366'; this.style.color='white';" onMouseOut="this.style.backgroundColor='#CCCCCC'; this.style.color='#333366';"><a class="nav" href="?">Wie ? </a></td>
        <td class="navigatie" onMouseOver="this.style.backgroundColor='#333366'; this.style.color='white';" onMouseOut="this.style.backgroundColor='#CCCCCC'; this.style.color='#333366';"><a class="nav" href="?">Wat ? </a></td>
        <td class="navigatie" onMouseOver="this.style.backgroundColor='#333366'; this.style.color='white';" onMouseOut="this.style.backgroundColor='#CCCCCC'; this.style.color='#333366';"><a class="nav" href="?">Portfolio </a></td>
        <td class="navigatie" onMouseOver="this.style.backgroundColor='#333366'; this.style.color='white';" onMouseOut="this.style.backgroundColor='#CCCCCC'; this.style.color='#333366';"><a class="nav" href="?">Links </a></td>
      </tr>
    </table>
	</td>
  </tr>
  <tr>
 
    <td id="table_middle"> 
	<div id="uptime">
	<br>
	<?php
		echo php_uname();
		$uptime_info = "Uptime: " . trim(exec("uptime")) . "\n\n";
		echo "<br>". $uptime_info;
	?>
	<br><br>
	<script type="text/javascript">
		<!--
		d=document;
		pag="";col="";scr=0;b=navigator.appName;
		scr=screen.width+"*"+screen.height;
		ref=escape(document.referrer);
		pag=escape(d.URL);
		if (b != "Netscape") {col=screen.colorDepth}
		else {col=screen.pixelDepth}
		if(col=="undefined"){col="";}
		d.write("<a href=http://www.belstat.be/viewstat.asp?UserID=verdeyendotinfo&lang=nl target=_blank><img border=0 src=\"http://www.belstat.be/regstat.aspx?");
		d.write("UserID=verdeyendotinfo&BColor=&refer=" + ref + "&pag=" + pag + "&b=" + b + "&col=" + col + "&scr=" + scr);
		d.write("\" align=center width=16 height=16 alt=\"Monitored&nbsp;by&nbsp;BelStat&nbsp;-&nbsp;Your&nbsp;Site&nbsp;Counts\"><\/a>");
		// -->
    </script>
	</div>
	<br>
	
		<p>Mutley, you snickering, floppy eared hound. When courage is needed, you're never around. Those medals you wear on your moth-eaten chest should be there for bungling at which you are best. So, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon, stop that pigeon. Howwww! Nab him, jab him, tab him, grab him, stop that pigeon now. </p>
      	<p>Ten years ago a crack commando unit was sent to prison by a military court for a crime they didn't commit. These men promptly escaped from a maximum security stockade to the Los Angeles underground. Today, still wanted by the government, they survive as soldiers of fortune. If you have a problem and no one else can help, and if you can find them, maybe you can hire the A-team. </p>
      	<p>One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, it's a pretty story. Sharing everything with fun, that's the way to be. One for all and all for one, Muskehounds are always ready. One for all and all for one, helping everybody. One for all and all for one, can sound pretty corny. If you've got a problem chum, think how it could be. </p>
	  	
	  </td>
  </tr>
  <tr>
    <td id="table_bottom">&nbsp; </td>
 </tr>
</table>
<p id="copyright">Copyright Joeri Verdeyen</p>
 <p>
      <a href="http://validator.w3.org/check?uri=referer"><img border="0"
          src="http://www.w3.org/Icons/valid-html401"
          alt="Valid HTML 4.01!" height="31" width="88"></a>&nbsp;  &nbsp; 
	<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://213.118.124.247:8080/style/style.css"><img border="0"
          src="http://jigsaw.w3.org/css-validator/images/vcss"
          alt="Valid HTML 4.01!" height="31" width="88"></a> 
  </p>
</div>
</body>
</html>

Lashknife · 23 jul 2005

mja, de onmouseover styled enkel de background en color van de TD, en idd het binnenliggende A element override dat met zijn eigen styles.

Een oplossing: (om te volgen geeft je je td's een color:red mee, dan kun je perfect zien wat er zichtbaar is tov de A elements inside uw td's)
- zet de onmouseovers op jouw A's te zetten
- dan krijg je nog een 1px padding ruimte van je td's dus daar zet je de padding:0px bij in je class van je td's.
- dan zie je dat er toch nog ruimte is boven en onder de link wegens lineheight gedoe van de a-tekst tov je td-container. Dit los je op door je A's een display:block mee te geven zodat je je A's zelf ook padding kan meegeven en dus je A-blocks kan vergroten.
geef je A block dan ook een padding: 1px 0px
- dan kleuren je A's wel juist, maar je hebt geen 1px padding ruimte meer met je td. Eenvoudig door je A-padding dus te verhogen eh (je hebt minstens 1px padding nodig op top en bottom om de lineheight te fixen

hf tweaking

verdeye · 23 jul 2005

thx, problem solved

Lashknife · 23 jul 2005

een ander oplossing - maar als je bovenstaande code heb je maar 1 class nodig eigenlijk (enkel voor A's) - is om zowel een onmouseover bij de td als bij de a te zetten, maar dan moet je overal alternatieve classNames via js gaan toewijzen...

Skratz · 23 jul 2005

waarom mouseover op td en waarom mouseover met javascript als het perfect met css op de a tag kan? (en zelfs op eender welk element als ge niet naar ie moet kijken)

verdeye · 23 jul 2005

in firefox werkt ie zoals altijd perfect, i.e. is iet annes

Lashknife · 23 jul 2005

skratz omdat hij met een onmouseover manier begonnen is, had ik enkel wat wijzigingen aangebracht, niet alles opnieuw gedaan zoals idd perfect mogelijk is met de 4 pseudoclasses van A-tag

Skratz · 24 jul 2005

het was ook niet op u lashknife, ik verwacht niet dat er ook maar iemand hier iemand anders zen hele code gaat herschrijven voor de leute.

Archief - CSS/javascript : achtergrondkleur verandert niet bij onmouseover

verdeye

Legacy Member

servi

Legacy Member

Lashknife

Legacy Member

verdeye

Legacy Member

Lashknife

Legacy Member

verdeye

Legacy Member

Lashknife

Legacy Member

verdeye

Legacy Member

Lashknife

Legacy Member

Skratz

Legacy Member

verdeye

Legacy Member

Lashknife

Legacy Member

Skratz

Legacy Member