login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div hover (Opgelost)

Offline SilVeX - 06/09/2007 09:07 (laatste wijziging 06/09/2007 13:09)
Avatar van SilVeXHTML beginner Goede morgen,

Ik wil mijn divje een mouse-over en een link geven. Dit wou ik zonder javascript doen dus alleen met css.

Nu heb ik dit in mijn html staan:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="link"><div class="MenuVakje"><h3>Barbeque's</h3></div></a>


En dit dacht ik dan in mijn css te gebruiken:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .MenuVakje {
  2. 	width: 168px;
  3. 	border:0px;
  4. 	height:29px;
  5. 	background-image:url(../image/menuvakje.jpg);
  6. 	background-repeat:no-repeat;
  7. }
  8.  
  9. .MenuVakje hover {
  10. 	background:url("image/menuvakje1.jpg") no-repeat;
  11. 	text-decoration:none;
  12. }


Maar dat wil niet werken. Kan iemand dit helpen oplossen?

10 antwoorden

Gesponsorde links
Offline Stijn - 06/09/2007 16:21
Avatar van Stijn PHP expert
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .MenuVakje:hover {
  2.     background:url("image/menuvakje1.jpg") no-repeat;
  3.     text-decoration:none;
  4. }
Wat doet het als je het zo doet? Ik weet dat dit zo werkt bij links.
Offline CDNC - 06/09/2007 17:54 (laatste wijziging 06/09/2007 17:58)
Avatar van CDNC PHP ver gevorderde zoals stijn zegt werkt het in FF, in IE (duh) niet...

Je kunt het simpel oplossing met JS
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. onmouseover="this.style.background='hover_ding.png'"
  2. onmouseout="this.style.background='normaal_ding.png'"
Offline gothmog - 06/09/2007 18:01 (laatste wijziging 06/09/2007 18:02)
Avatar van gothmog Lid
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .MenuVakje:hover {
  2.     background-image:url("image/menuvakje1.jpg") no-repeat;
  3.     text-decoration:none;
  4. }


de -image vergeten

Maar dit kun je nooit klikbaar maken in css en die a href om een div werkt ook niet hoor. Ik zou toch javascript gebruiken.
Offline SilVeX - 08/09/2007 17:40
Avatar van SilVeX HTML beginner
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2.       onmouseover="MenuVakje.style.background-image='image/menuvakje1.jpg'"
  3.       onmouseout="MenuVakje.style.background-image='image/menuvakje.jpg'"
  4. </script>


Dat werkt niet, ik ben niet echt een ster in javascript. Kan iemand mij zeggen in welke richting ik meot zoeken naar de oplossing
Offline Assailant - 08/09/2007 17:45 (laatste wijziging 08/09/2007 17:48)
Avatar van Assailant Nieuw lid Dit downloaden en in je root zetten:
klik

Dan deze css gebruiken:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. .MenuVakje 
  2. {
  3.  
  4.     background-image: url("image/menuvakje.jpg");
  5.     background-repeat: no-repeat;
  6.     behavior: url("csshover.htc");
  7.     border: 0px;
  8.     height: 29px;
  9.     width: 168px;
  10.  
  11. }
  12.  
  13. .MenuVakje:hover 
  14. {
  15.  
  16.     background-image: url("image/menuvakje1.jpg");
  17.     background-repeat: no-repeat;
  18.     text-decoration: none;
  19.  
  20. }
Offline SilVeX - 08/09/2007 17:50
Avatar van SilVeX HTML beginner @Assailant:

In FF begint er wel iets te werken. Maar in IE helemaal niks. En ik krijg ook niet mijn 2e plaatje maar mijn 1e plaatje verdwijnt.
Offline Assailant - 08/09/2007 17:51 (laatste wijziging 08/09/2007 17:54)
Avatar van Assailant Nieuw lid controleer even of de urls van de afbeeldingen goed zijn .
Ik ken namelijk je directory structuur niet he.

Edit:
Maak van je html eens dit:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="MenuVakje"><h3><a href="link">Barbeque's</a></h3></div>
Offline SilVeX - 08/09/2007 17:54 (laatste wijziging 08/09/2007 20:31)
Avatar van SilVeX HTML beginner In FF werkt het nu maar nog niet in IE, iemand een oplossing?

Of is er misschien een andere manier om een divje een andere achtergrond te geven? Een manier die zowel in FF als in IE werkt?

Edit 2:
Ik probeer het nu weer met javascript maar ik heb eerder het idee dat ik er een rotzooi van maak inplaats van dat ik naar de oplossing toe werk.
Dit is wat ik nu heb in de head:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="javascript">
  2. function change()
  3. {
  4. document.getElementByClass("MenuVakje").style.background-image = "url('../image/menuvakje1.jpg')";
  5. }
  6. </script>


En daarna heb ik dit in de body:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="#"><div class="MenuVakje" onmouseover="change()"><h3>Barbeque's</h3></div></a>


Alleen dit wil niet werken, ziet iemand wat ik verkeerd doe?
Offline NCube - 08/09/2007 20:56 (laatste wijziging 08/09/2007 20:58)
Avatar van NCube HTML beginner
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="link" class="MenuVakje"><h3>Barbeque's</h3></a>

css code - Bekijk de code zonder highlighting - Klap code in 
  1. .MenuVakje {
  2.     display: block;
  3.     width: 168px;
  4.     border:0px;
  5.     height:29px;
  6.     background-image:url( "image/menuvakje.jpg" );
  7.     background-repeat:no-repeat;
  8. }
  9.  
  10. .MenuVakje:hover {
  11.     background:url( "image/menuvakje1.jpg" ) no-repeat;
  12.     text-decoration:none;
  13. }

Zo zou het gewoon in IE, FF en Opera moeten werken zonder enige javascript.
Door de link element de display: block attribuut te geven gaat hij zich gedragen als een div en kan je ook de width en height makkelijk aanpassen.
Offline SilVeX - 08/09/2007 21:01
Avatar van SilVeX HTML beginner Het enige nadeel is dat mijn hele lay-out uit elkaar valt.

Maar in ieder geval werkt de mouseover wel 
Hartelijk dank daarvoor
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.268s