Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Hover effect werkt niet (Opgelost)

Tomgeen - 18/12/2011 16:07 (laatste wijziging 18/12/2011 17:01)

Lid

Hallo,

Ik heb een formulier met een lijst met checkboxen gecreëerd. En nu wil ik een hover effect aan de lijst toevoegen, maar dat werkt om een of andere reden niet.

De lijst is afkomstig van een php script:

php code - Bekijk de code zonder highlighting - Klap code in

<php
echo '<ul>';
echo '<li>' . '<input type="checkbox" name="Merk[]" value="Ford"/>' . "Ford" . '<br/>' . '</li>';
echo '</ul>';
?>

<php
echo '<ul>';
echo '<li>' . '<input type="checkbox" name="Merk[]" value="Ford"/>' . "Ford" . '<br/>' . '</li>';
echo '</ul>';
?>

de css die ik daaraan toevoeg:

css code - Bekijk de code zonder highlighting - Klap code in

                #wrapper ul {
	list-style:none;
	cursor: pointer;	
	
	
}

#wrapper ul li {
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-image:url(list%20hover%20background.JPG);
	background-repeat: repeat-x;
	color:#999;
	margin-left: -40px;
	margin-top: 0px;
	padding-top: 10px;
	height: 50px;
}

#wrapper ul li:hover{
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-image:url(list%20background.JPG);
	background-repeat: repeat-x;
	color:#999;
	margin-left: -40px;
	margin-top: 0px;
	padding-top: 10px;
	height: 50px
	
}
            
#wrapper ul {
	list-style:none;
	cursor: pointer;	
 
 
}
 
#wrapper ul li {
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-image:url(list%20hover%20background.JPG);
	background-repeat: repeat-x;
	color:#999;
	margin-left: -40px;
	margin-top: 0px;
	padding-top: 10px;
	height: 50px;
}
 
#wrapper ul li:hover{
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-image:url(list%20background.JPG);
	background-repeat: repeat-x;
	color:#999;
	margin-left: -40px;
	margin-top: 0px;
	padding-top: 10px;
	height: 50px
 
}
 

Weet iemand hoe ik dat kan oplossen?

Bvd, Tom

15 antwoorden

Gesponsorde links

WouterJ - 18/12/2011 16:41
HTML gevorderde		- Scripts tussen code tags s.v.p. - Lange scripts op plaatscode.be En je code werkt gewoon: http://tinkerbin.com/MrohUhvx Dus waarschijnlijk is de url naar de afbeelding niet goed. Je maakt sowieso 2 fouten: 1) Nooit spaties in een url gebruiken gebruik _ of - daarvoor 2) Extensies (.jpg) nooit met hoofdletters Is het path wel berekend vanaf de stylesheet directory?

Tomgeen - 18/12/2011 17:07
Lid		1) ik heb de spaties veranderd naar _ 2) en de (.jpg) naar kleine letters gewijzigd. 3) de .jpg bestanden staan in de zelfde map als het css document. Het vreemde is dat hij wel de eerste afbeelding uit "#wrapper ul li { " laat zien, maar niet de afbeelding uit "#wrapper ul li:hover{". Hoe kan dat?

WouterJ - 18/12/2011 17:50
HTML gevorderde		Heb je misschien een online voorbeeldje?

Tomgeen - 18/12/2011 17:52
Lid		Nee helaas niet. Zou inderdaad wel makelijker zijn.

WouterJ - 18/12/2011 18:06
HTML gevorderde		Worden de andere stylen wel uitgevoerd? En kun je misschien niet even een online voorbeeldje op tinkerbin opzetten, zoals ik toenet ook heb gedaan?

Tomgeen - 18/12/2011 18:20

Lid

Als ik tinkerbin open dan krijg ik de melding "deze site bevat fouten en werkt niet naar behoren" dus dat gaat niet lukken.

Als ik het php bestandje los open in internet explorer (dus niet require in een andere site), dan geeft hij inderdaad géén styles.

Maar als ik toch gewoon het volgende heb, dan moet hij het toch gewoon doen.

php code - Bekijk de code zonder highlighting - Klap code in

<link href="test.css" rel="stylesheet" type="text/css" />

<form action="" method="GET">

<?php

echo '<ul>';
echo '<li>' . '<input type="checkbox" name="Merk[]" value="Ford"/>' . "Ford" . '<br/>' . '</li>';
echo '</ul>';
?>

<input type="submit" name="zoeken" value="Zoeken" /> 

</form>

<link href="test.css" rel="stylesheet" type="text/css" />
 
<form action="" method="GET">
 
<?php
 
echo '<ul>';
echo '<li>' . '<input type="checkbox" name="Merk[]" value="Ford"/>' . "Ford" . '<br/>' . '</li>';
echo '</ul>';
?>
 
<input type="submit" name="zoeken" value="Zoeken" /> 
 
</form>

WouterJ - 18/12/2011 19:24
HTML gevorderde		Dan gaan we naar de volgende eventuele 'oplossing'. Heb jij IE7 of lager? Zo ja, dan klopt het dat het niet werkt. Want IE7- accepteert alleen hovers op anchor (<a>) elementen. Om dit te voorkomen kun je gebruik maken van bijv. Whatever:hover, je kunt dit verbeteren door dit in samenwerking te laten gaan met Conditional Comments, waardoor je dit script alleen voor IE7 en lager kunt laten laden.

Tomgeen - 18/12/2011 19:31 (laatste wijziging 18/12/2011 19:45)

Lid

nee, ik heb IE-8. Dus dat is het dan ook niet.

EDIT:
Ik heb nu #wrapper weg gehaald en heb ik het volgende:

css code - Bekijk de code zonder highlighting - Klap code in

                ul {
	list-style:none;
	cursor: pointer;	
}

ul li {
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-image:url(list_background.jpg);
	background-repeat: repeat-x;
	color:#000;
	margin-left: -40px;
	margin-top: 0px;
	padding-top: 10px;e
	height: 50px;
}

ul li: hover{
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-image:url(list_hover_background.jpg);
	background-repeat: repeat-x;
	color:#999;
	margin-left: -40px;
	margin-top: 0px;
	padding-top: 8px;
	height: 40px;
	
}
            
ul {
	list-style:none;
	cursor: pointer;	
}
 
ul li {
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-image:url(list_background.jpg);
	background-repeat: repeat-x;
	color:#000;
	margin-left: -40px;
	margin-top: 0px;
	padding-top: 10px;e
	height: 50px;
}
 
ul li: hover{
	font-size:12px;
	font-family:Verdana, Geneva, sans-serif;
	background-image:url(list_hover_background.jpg);
	background-repeat: repeat-x;
	color:#999;
	margin-left: -40px;
	margin-top: 0px;
	padding-top: 8px;
	height: 40px;
 
}
 

Nu geeft hij alleen de style van "ul li {" weer, maar de hover nog steeds niet.

Pieter - 19/12/2011 07:57 (laatste wijziging 19/12/2011 09:49)
SEO guru		En als je de spatie tussen li: en hover weghaalt? Update: kan ook zijn dat je quirks modus zit, waar :hover niet werkt. Vervang even dit als je doctype: html4strict code - Bekijk de code zonder highlighting - Klap code in <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Tomgeen - 19/12/2011 18:49
Lid		Het is inderdaad de quirks modus. Nu werkt het! Maar wat is quirks modus?

Pieter - 19/12/2011 19:01
SEO guru		Een (van de vele) IE problemen. De geschiedenis kan je hier op na lezen.

Tomgeen - 19/12/2011 19:16
Lid		Is het dan verstandig om dit standaard in een site op te nemen, of kan dit ook andere dingen weer verstoren?

WouterJ - 19/12/2011 19:27
HTML gevorderde		Je moet altijd een doctype op regel 1 hebben, of in elk geval <!doctype html>. Zoniet, dan gaat IE standaard in quircksmode. Quircksmode, of hoe je dat irritante woord ook spelt, is een mode waarin IE overspringt naar een oude HTML en CSS parser. Met oud bedoel ik IE6 (of zelfs IE5.5). Hierdoor site je website er echt totaal mislukt uit. Je moet dus [u]nooit[u] proberen de Quircksmode aan te zetten en altijd voorkomen dat IE in deze mode schiet.

Pieter - 19/12/2011 19:31
SEO guru		Nope, je moet gewoon de juiste doctype leren gebruiken. Wat was je standaard doctype? En had je er nog iets voor staan? Vanaf er wat tekens voor de doctype staan, gaat IE automatisch in quirksmode. Lees ook nog eens het volgende na: http://en.wikipedia.org/wiki/Quirks_mode

Tomgeen - 19/12/2011 19:35
Lid		Ik had het volgende: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Maar ik had nog nooit van quircksmode gehoord, vandaar.

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten