[js] hover met afbeelding en tekst

**PatrickA** · 05-11-2011, 18:32

Hi,

Ik ben bezig met een persoonlijk blog, en nu loop ik tegen een probleem aan.

Ik wil bij "mijn evenementen" dat als ik over de tekst of afbeelding ga, dat alles veranderd.

Maar dat wil niet. Iemand zei dat het enkel met JS kon, maar hier kan ik geen script van vinden.

Mijn html is:

PHP Code:


<div class="kall" style="margin-top: 10px;"> 

                    <a href="#" style="margin-top: 7px;">Datum: <em>30 September 2011</em></a> 

                    <p>Toernooidivisie C Rolstoelbasketbal - Roden</p></div>

en mijn css:

PHP Code:


.kall { width: auto; height: 46px; background-color: #c55a45; margin-left: 10px; margin-top: -10px; margin-right: 10px;} 

.kall em {font: normal 12px Verdana; color: #fff; text-decoration: none; text-shadow: 0.1em 0.1em 0.05em #000;} 

.kall em:hover {font: normal 12px Verdana; color: #000; text-shadow: 0.1em 0.1em 0.05em #fff;} 

.kall p {font: normal 10px Verdana; color: #fff; text-decoration: none; text-shadow: 0.1em 0.1em 0.05em #000;} 

.kall p:hover {font: normal 10px Verdana; color: #000; text-shadow: 0.1em 0.1em 0.05em #fff;} 

.kall a {font: bold 12px Verdana; color: #fff; padding-left: 10px; text-decoration: none; float: left; text-shadow: 0.1em 0.1em 0.05em #000;} 

.kall a:hover {font: bold 12px Verdana; color: #000; float: left; text-shadow: 0.1em 0.05em 0.05em #fff;} 

.kall:hover {background-color: #C04A34; width: auto; height: 46px;}

Kan iemand mij hiermee helpen?

Patrick.

**Dannyvw** · 05-11-2011, 18:37

"Ik wil bij "mijn evenementen" dat als ik over de tekst of afbeelding ga, dat alles veranderd."

Wat moet er veranderen?

**PatrickA** · 05-11-2011, 18:42

Origineel gepost door Dannyvw

"Ik wil bij "mijn evenementen" dat als ik over de tekst of afbeelding ga, dat alles veranderd."

Wat moet er veranderen?

De kleur van de afbeelding, dus gewoon iets donkerder. En de tekst van wit naar zwart.

**Jaime D** · 05-11-2011, 18:47

Code:

<div class="kall" onmouseover="this.style.color='black'; this.style.backgroundColor='#C04A34';" onmouseout="this.style.color='white'; this.style.backgroundColor='#c55a45';" style="margin-top: 10px;"> 
                    <a href="#" style="margin-top: 7px;">Datum: <em>30 September 2011</em></a> 
                    <p>Toernooidivisie C Rolstoelbasketbal - Roden</p>
</div>

Zoiets?

**PatrickA** · 05-11-2011, 18:51

Nee, dat heeft hetzelfde effect.

**Jaime D** · 05-11-2011, 18:53

Welk 'zelfde' effect en wat verschilt het met wat het moet zijn?

**PatrickA** · 05-11-2011, 18:57

Origineel gepost door Jaime Derrez

Welk 'zelfde' effect en wat verschilt het met wat het moet zijn?

Het geeft hetzelfde effect als met de css.

**Jaime D** · 05-11-2011, 18:58

En wat klopt daar nou niet aan? Je bent allesbehalve duidelijk daarover. Je zegt nergens wat je wél wilt.

**PatrickA** · 05-11-2011, 19:03

Het is de bedoeling dat als ik over een stukje tekst of stukje afbeelding ga, dat de afbeelding veranderd, en de tekst. Dus de afbeelding wat donkerder en de tekst van wit naar zwart.

Nu is het zo dat als ik over de afbeelding ga dat enkel het woord "datum" en de achtergrond veranderd en de rest pas als ik over dat stukje tekst ga.

Snap je welke kant ik op wil?

**Jaime D** · 05-11-2011, 19:08

Wijzig de onmouseout/onmouseover dan naar het element waar het bij hoort in plaats van de algehele div.

**PatrickA** · 05-11-2011, 19:11

Origineel gepost door Jaime Derrez

Wijzig de onmouseout/onmouseover dan naar het element waar het bij hoort in plaats van de algehele div.

Alles wat in de div staat, moet hij meepakken, en zoals jij had is dat het geval, alleen werkt het niet.
Aanvullend bericht:
Iemand een oplossing?

[js] hover met afbeelding en tekst