CSS --> tr hover

Status
Niet open voor verdere reacties.
B

*Baia*

Gebruiker
Lid geworden
17 mei 2001
Berichten
438
Beste mensen,

Ik ben bezig met mijn site en wil d.m.v. css mijn website opmaken.

Nu heb ik deze code:
<tr onMouseOver="this.style.backgroundColor='#F8F3F7';" onMouseOut="this.style.backgroundColor='#FEEBF5'">

voor het krijgen van een andere achtergrondkleur in mijn tabel.

Ik wil hetzelfde krijgen maar dan als .class, dus dat ik alleen opgeef: <table class=blablabla><tr><td>enzenz...

Wie kan me op weg helpen want ik kom er niet uit!

Groeten,
Bakerzz
 
Zal niet enkel met enkel class gaan, je zult toch onmouse moeten gebruiken.

Style:

tr.test {
background: yellow;

}
tr.test2 {
background: green;

}

body:
<tr class="test" onmouseover="this.className='test2'" onmouseout="this.className='test'">


:cool:
 
Je kan dat prima met css doen, dan moet je de link een hover state mee geven. Probeer dit maar eens:

PHP: 
<html>
<head>
<style type="text/css">
a {
   background-color:#99FFFF;
}
a:hover {
   background-color:#FFCCFF;
}
.link { 
   text-decoration:none;
   display:block;
}
</style>
</head>
<body>
<table>
<tr><td width="300"><a href="#" class="link">test</a></td></tr>
</table>
</body>
</html>
 
Dag Miem,

Wat jij hebt is inderdaad ongeveer wat ik nodig heb maar het is nog niet helemaal compleet.

Er staan in de rijen (<tr><td></td></tr>) geen links maar ik wil gewoon dat, wanneer je met je muis erover heen gaat dat de achtergrondkleur (van alleen die rij) een andere kleur krijgt.

Ik dacht meer daan dit:
<style type="text/css">
tr {
background-color:#99FFFF;
}
tr:hover {
background-color:#FFCCFF;
}
</style>

Kan dat of moet het anders?

Groeten,
Bakerzz
 
Dat zal niet werken.
Een hover functie kun je ook gebruiken zonder een link te activeren, dat heb ik in mijn voorbeeld ook gedaan.
Display: block zorgt ervoor dat de hele rij wordt gekleurd en niet alleen het tekst gedeelte, dus dat heb je ook nodig.
 
Dag Miem,

Dat snap ik inderdaad. Ik heb alleen het probleem dat ik meerdere kolommen (<td></td><td></td>) heb en ik wil dat de hele rij (dus de <tr></tr>) een andere kleur krijgt. Dat gebeurd in uw voorbeeld niet...

Ik heb hetvolgende geprobeerd maar doet het niet:
<style type="text/css">
tr {
background-color:#99FFFF;
}
tr:hover {
background-color:#FFCCFF;
}
</style>

Ik heb de class opgeroepen met: <tr class=tr>

Bakerzz
 
Heb je nu al mijn voorbeeld geprobeerd? En misschien even wat css lessen doornemen kan ook geen kwaad;)
 
Dag,

Ik heb al aardig wat CSS doorgenomen maar ik kan nergens de functie vinden voor de tr.

Bakerzz
 
PHP: 
<td bgcolor='red' onmouseover="this.style.backgroundColor='yellow';" onmouseout="this.style.backgroundColor='red';">text</td>

Dit zal ongetwijfeld ook bij TR werken? :D
 
Laatst bewerkt:
Met css kun je een stijl geven aan een element, het maakt niet uit aan welk element.
 
Dag aatjeetee,

Ja, dat weet ik wel zeker maar ik zou het graag op deze manier willen aangezien ik een hele lijst uit de database haal:

<style>
TR {blablabla}
</style>

<td class=TR>
<td>hier je text enzo</td>
<td>hier je text enzo</td>
<td>hier je text enzo</td>
<td>hier je text enzo</td>
</tr>
 
Je zal wel meer tr's en td's gebruiken dus zal je de class die je wilt aanroepen een duidelijke naam moeten geven. In mijn voorbeeld heb ik die class de naam "link"mee gegeven maar dat kan ook een andere naam zijn.
 
Geplaatst door *Baia*
Dag aatjeetee,
Klik om te vergroten...
PHP: 
<style>
TR { background-color: red; }
</style>

<table><tr onmouseover="this.style.backgroundColor='yellow';" onmouseout="this.style.backgroundColor='red';">

<td>blaat</td>
<td>hier je text enzo</td>

</tr></table>

Gewoon ff een "test-ding", maar zo wil je het lijkt mij?

edit: heb het van Miem nog ff goed doorgelezen ..

Het is wel logisch (dat van Miem), je maakt van je text een link (die nergens naartoe gaat), en dan gewoon van kleur laten veranderen .. :)
 
Laatst bewerkt:
bekijk dit:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<!--  Created with the CoffeeCup HTML Editor  -->
<!--        [url]http://www.coffeecup.com/[/url]         -->
<!--       Brewed on 25-3-2004 17:45:47       -->
<head>
  <title></title>
  
  
<style type="text/css">
<!-- 
.blaat1{background: #FF6600;}
.blaat2{background: #FFFF80;}
-->

</style>
</head>
<body>

<table>
  <tr class="blaat1" OnMouseOver="this.className='blaat2'" OnMouseOut="this.className='blaat1'"><!-- Row 1 -->
     <td>&nbsp;1</td><!-- Col 1 -->
     <td>&nbsp;2</td><!-- Col 2 -->
     <td>&nbsp;3</td><!-- Col 3 -->
     <td>&nbsp;4</td><!-- Col 4 -->
     <td>&nbsp;5</td><!-- Col 5 -->
  </tr>
  <tr>
     <td>&nbsp;a</td><!-- Col 1 -->
     <td>&nbsp;b</td><!-- Col 2 -->
     <td>&nbsp;c</td><!-- Col 3 -->
     <td>&nbsp;d</td><!-- Col 4 -->
     <td>&nbsp;e</td><!-- Col 5 -->
  </tr>
</table>


</body>
</html>
 
Jooooooooo,

Helemaal te gek! Dit werkt!

Hartstikke bedankt allemaal, nu kan ik weer verder!

Groeten,
Jeroen
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan