login  Naam:   Wachtwoord: 
Registreer je!
 Forum

li:hover

Offline knoopa - 20/06/2006 17:41
Avatar van knoopaOnbekend ik heb een menu met
php code - Bekijk de code zonder highlighting - Klap code in 
  1. li:hover {
  2.  background-color: #325696;
  3. }
in ff werkt dit perfect maar in ie niet...
hoe fix ik dat want met
php code - Bekijk de code zonder highlighting - Klap code in 
  1. a:hover
is het hovertable oppervlak te klein

21 antwoorden

Gesponsorde links
Offline Dark_Paul - 20/06/2006 17:45
Avatar van Dark_Paul PHP ver gevorderde Most modern browsers support the :hover selector for any html element. This is cool, because it enables you to, for instance, apply a mouseover effect to table rows <tr> using only CSS. IE however, with a market share of > 90%, does not natively support :hover on elements other than links <a>, rendering the entire :hover concept useless
dit kwam ik tegen toen ik bij google 'li:hover' intypte.. het artikel is in het engels, maar misschien het lezen waard.
http://www.xs4all.nl/~peterned/csshover.html
Offline knoopa - 20/06/2006 17:47
Avatar van knoopa Onbekend dat had ik ook al gevonden toen ik hier ging zoeken maar hoe kan ik dit veranderen dat het in ie werkt en dat het oppervlak groot genoeg is
Offline Gerard - 20/06/2006 17:48
Avatar van Gerard Ouwe rakker Je zou kunnen werken met een javascript action die de achtergrond kleur van je li veranderd.
Offline knoopa - 20/06/2006 17:50
Avatar van knoopa Onbekend zou iemand daar een voorbeeld van kunnen geven want ik ken niet echt goed javascript
Offline Gerard - 20/06/2006 17:54
Avatar van Gerard Ouwe rakker
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <html>
  2.  
  3.  <head>
  4.  <title>test</title>
  5.  </head>
  6.  
  7.  <body>
  8.  
  9. <ul>
  10.  <li onMouseOver="this.style.background = '#FF0000';" onMouseOut="this.style.background = '#FFFFFF';">Hoi</li>
  11.  <li>Test</li>
  12. </ul>
  13.  
  14.  </body>
  15.  
  16. </html>
Offline knoopa - 20/06/2006 18:00
Avatar van knoopa Onbekend
php code - Bekijk de code zonder highlighting - Klap code in 
  1. a.sidemenu {
  2. 	font-family: nosfer;
  3. 	color: #ffffff;
  4. 	text-decoration: none;
  5. 	font-weight: bold;
  6. 	display: block;
  7. }
block wil ook niet werken in ie:s
Offline svm - 20/06/2006 18:02 (laatste wijziging 20/06/2006 18:03)
Avatar van svm PHP ver gevorderde Ik heb zoiets ook.
Daarbij heb ik met css de mouseover van grijs naar zwart gemaakt bij een hyperlink.
En dan de li in de hyperlink-tage gezet.
Een voorbeeld hiervan op:
http://home.wan...tes/overig/
Offline knoopa - 20/06/2006 18:29
Avatar van knoopa Onbekend en bij dat javascript ding gaat mijn bolletje weg...
Offline Ontani - 20/06/2006 18:40 (laatste wijziging 20/06/2006 18:41)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 http://212.224.149.244/lay45/
check het menu links

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul>
  2. 	 <li id="sidebarLeft1" onmouseover="changeUp('sidebarLeft1');" onmouseout="changeDown('sidebarLeft1');"><a href="javascript:;">Webdesign</a></li>
  3. 	 <li id="sidebarLeft2" onmouseover="changeUp('sidebarLeft2');" onmouseout="changeDown('sidebarLeft2');"><a href="javascript:;">Webhosting</a></li>
  4. 	 <li id="sidebarLeft3" onmouseover="changeUp('sidebarLeft3');" onmouseout="changeDown('sidebarLeft3');"><a href="javascript:;">Dedicated Hosting</a></li>
  5. 	 <li id="sidebarLeft4" onmouseover="changeUp('sidebarLeft4');" onmouseout="changeDown('sidebarLeft4');"><a href="javascript:;">Artistic</a></li>
  6. 	 <li id="sidebarLeft5" onmouseover="changeUp('sidebarLeft5');" onmouseout="changeDown('sidebarLeft5');"><a href="javascript:;">Very Nice</a></li>
  7. 	 <li id="sidebarLeft6" onmouseover="changeUp('sidebarLeft6');" onmouseout="changeDown('sidebarLeft6');"><a href="javascript:;">Lorem Ipsum</a></li>
  8.     </ul>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. <!--
  3. function changeUp ( id ) {
  4. 	document.getElementById(id).className = "listHover";
  5. }
  6.  
  7. function changeDown ( id ) {
  8. 	document.getElementById(id).className = "listNormal";
  9. }
  10. -->
  11. </script>


php code - Bekijk de code zonder highlighting - Klap code in 
  1. .listHover {
  2.  
  3.  	color: #EE6001;
  4.  
  5.  }
  6.  
  7.  .listNormal {
  8.  
  9.  	color: #FEAD00;
  10.  
  11.  }
Offline knoopa - 21/06/2006 08:19
Avatar van knoopa Onbekend @ontani ik wilde de achtergrond kleur laten veranderen en niet het bolletje maar als ik dat bij de jouwe doet veranderd hij nog alleen de tekst en niet de hele li... en bij die andere ging het bolletje weg
Offline XenoX - 21/06/2006 08:24
Avatar van XenoX Gouden medailleGouden medaille

PHP expert		 http://css.maxd...ical08.htm
?
Offline nielsvdwal - 21/06/2006 09:30
Avatar van nielsvdwal PHP gevorderde je kan toch gewoon a:hover gebruiken..

a:link, a:visited {
display: block;
width: 200px;
height: 50px;
background-color: #FFFFFF;
}

a:hover {
background-color: #CCCCCC;
}
Offline Thomas - 21/06/2006 10:44
Avatar van Thomas Moderator Ik ben bezig met een tutorialtje over "blokvullende" hyperlinks, die geen gebruik maken (niet afhankelijk zijn) van JavaScript. Het is een 100% HTML/CSS oplossing.
Offline Ontani - 21/06/2006 11:36 (laatste wijziging 21/06/2006 11:37)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 zolang je gebruikt maakt van een achtergrond en deze is gewoon een kleur en geen afbeelding is dit gemakkelijk op te lossen met html/css, als je bijvoorbeeld de achtergrond wilt veranderen naar een afbeelding krijg je problemen met het preloaden...
Offline knoopa - 21/06/2006 11:59 (laatste wijziging 21/06/2006 12:01)
Avatar van knoopa Onbekend
Citaat:
je kan toch gewoon a:hover gebruiken..

a:link, a:visited {
display: block;
width: 200px;
height: 50px;
background-color: #FFFFFF;
}

a:hover {
background-color: #CCCCCC;
}


Citaat:
hoe fix ik dat want met [..code..]is het hovertable oppervlak te klein

leze is een kunst
@xenox dan pakt hij dat bolletje niet mee
Offline Ontani - 21/06/2006 12:14
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 zet dan uw list-style-type op none:
li {
list-style-type: none;
}
Offline knoopa - 21/06/2006 12:15
Avatar van knoopa Onbekend maar ik wil dat bolletje juist blijven houden...
Offline Ontani - 21/06/2006 12:20
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 de kleur van het bolletje is afhankelijk van de font kleur van de li dus moet je ook de color aanpassen samen met de background-color
Offline knoopa - 21/06/2006 12:22
Avatar van knoopa Onbekend met dat javascript ding lukte het maar toen ging het bolletje weg bij de hover
Offline Ontani - 21/06/2006 12:24
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 dan gooi eens wat je hebt online zodat we kunnen zien wat je gedaan hebt en wat je verkeerd zou gedaan hebben.
Offline knoopa - 21/06/2006 12:32 (laatste wijziging 21/06/2006 16:01)
Avatar van knoopa Onbekend http://skatelife.awardspace.com alleen de bovenste is met javascript de andere zijn met li:hover. in ie staan de regels ook te ver uit elkaar:s

EDIT: het is al opgelost
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.268s