login  Naam:   Wachtwoord: 
Registreer je!
 Forum

div hover

Offline vincentc - 08/02/2012 13:29
Avatar van vincentcLid goedenmiddag

Ik ben vrij nieuw met css maar het volgende "trucje" wat ik wil uithalen heb ik eerder gedaan maar ik krijg het nu niet voor elkaar... ziet iemand miss wat ik fout doe?

ik heb een lijstje met foto's in een tabel staan en in de tabel ernaast een div met info over de foto die info moet zichtbaar worden wanneer er een mouseover plaatsvind over de div waar de desbetreffende foto inzit.

Nu mijn probleem:
Het gebeurt niet!!! 


hier de code:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #info{
  2. border: 1px dotted #000;
  3. height:0px;
  4. width:300px;
  5. background:#fff;
  6. display:none;
  7. }
  8.  
  9.  
  10.  
  11. #minibox:hover + #info{
  12. height:375px;
  13. Display block;
  14. }
  15.  
  16.  
  17. #minibox{
  18. background:#fff;
  19. height:170px;
  20. width:170px;
  21. border: 10px solid;
  22. border-color: #fff;
  23. padding:0px;
  24. Z-index:1000;
  25. }
  26.  
  27. #minibox:hover{
  28. border-color:#f43059;
  29. }
  30.  
  31. #minibox img{
  32. width:170px;
  33. height:170px;
  34. border: 1px dotted #000;
  35. Z-index:1000;
  36. }


en de html

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <table border ="0">
  2. <tr>
  3. <td>
  4.  
  5. <table border ='0' width'100%' cellspacing ='5'>
  6. <tr>
  7. <td> <div id ='minibox'><div class ="image"><img src ='img/1.jpg'></div></td>
  8. <td> <div id ='minibox'><div class ="image"><img src ='img/1.jpg'></div></td>
  9. <td> <div id ='minibox'><div class ="image"><img src ='img/1.jpg'></div></td>
  10. <tr>
  11. <td> <div id ='minibox'><div class ="image"><img src ='img/1.jpg'></div></td>
  12. <td> <div id ='minibox'><div class ="image"><img src ='img/1.jpg'></div></td>
  13. <td> <div id ='minibox'><div class ="image"><img src ='img/1.jpg'></div></td>
  14. </tr>
  16.  
  17. </td>
  18. <td valign ="top">
  19. <div class ="info">
  20. info
  21. </div>
  22. </td>
  23. </tr>


Iemand die mij in de goede richting kan helpen?

BVD

6 antwoorden

Gesponsorde links
Offline koosax - 08/02/2012 16:57
Avatar van koosax Lid Dat kan je het beste met jQuery doen. Maak dan gebruik van .hover() - linkje
Offline WouterJ - 08/02/2012 19:07 (laatste wijziging 08/02/2012 19:08)
Avatar van WouterJ HTML gevorderde Je gebruikt als eerste #info om <div class="info"> te selecteren. Dit werkt niet, omdat #info een element met id="info" selecteert. Om een element bij class te selecteren moet je in CSS de punt (.) gebruiken: .info
Tevens zijn id's uniek. Wat betekend dat ze maar 1 keer voor mogen komen, wat jij dus nu als id="minibox" gebruik kan niet, deze komt veel vaker voor. Een class mag wel vaker voorkomen.

Ook moet je je aanwennen om in HTML dubbele quotes (") te gebruiken i.p.v. enkele. Dit is een soort standaard, het is niet verplicht maar is wel het best om te gebruiken.

Ook wat jij wilt niet werken. Je zal ook nog de CSS4 parent selector nodig hebben om het goed werkend te krijgen. En helaas voor jou is CSS3 nog niet eens uit, dus CSS4 duurt nog jaren.

Je kunt, zoals koosax probeert te zeggen, beter JS hiervoor gebruiken. Voorbeeldjes:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var elems = document.getElementsByClassName('minibox'); // alle .minibox elementen
  2. info = document.getElementById('info'); // het #info element
  3.  
  4. for( i=-1; elem = elems[++i]; ) {
  5.   elem.onmouseover = function() { // als de muis over een .minibox gaat
  6.     info.className += 'hovered'; // geef #info een .hovered class mee (stijl deze in CSS)
  7.   };
  8.  
  9.   elem.onmouseout = function() { // als de muis van het element af gaat
  10.     info.className = info.className.replace(/hovered/, ''); // haal de hovered class weg
  11.   };
  12. }


Of een framework als MooTools:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. document.addEvent('domready', function() {
  2.   var elems = $$('.minibox');
  3.   info = $('info');
  4.  
  5.   elems.each( function( elem ) {
  6.     elem.addEvents({
  7.       mouseenter : function() {
  8.         info.addClass('hovered');
  9.       },
  10.       mouseleave : function() {
  11.         info.removeClass('hovered');
  12.       }
  13.     });
  14.   });
  15. });
Bedankt door: Pieter
Offline dennizvd - 09/02/2012 07:29
Avatar van dennizvd Lid
css code - Bekijk de code zonder highlighting - Klap code in 
  1. #minibox:hover + #info{
  2. height:375px;
  3. Display block;
  4. }


Vervangen voor:

css code - Bekijk de code zonder highlighting - Klap code in 
  1. #minibox:hover #info{
  2. display:block;
  3. }


 
Offline WouterJ - 09/02/2012 08:00
Avatar van WouterJ HTML gevorderde @denniz, zal niet werken. #info is namelijk geen descendant van #minibox. #info is een sibling van de parent van #minibox.
Offline dennizvd - 09/02/2012 08:27 (laatste wijziging 09/02/2012 08:28)
Avatar van dennizvd Lid @WouterJ had ik eigenlijk niet naar gekeken. Zag gelijk die css fout vandaar. 
Offline WouterJ - 09/02/2012 17:52
Avatar van WouterJ HTML gevorderde Ten eerste is het geen fout en ten tweede waarom beantwoord je een vraag als je niet eens weet wat de vraag is? Lees eerst goed de topic post en ga dan pas antwoord geven...
Bedankt door: Pieter
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.246s