CSS vraag

Status
Niet open voor verdere reacties.
maniac2003

maniac2003

Terugkerende gebruiker
Lid geworden
14 dec 2006
Berichten
3.128
Hoi allemaal,

Was bezig met een CSS oefeningetje, maar loop vast.
De bedoeling is om de kleur van de tekst en van de div te veranderen. Nu veranderd de kleur van de tekst wel, maar hoe zorg ik er voor dat de <em> ook alleen veranderd als ik op de <em> sta.
En het veranderen van kleur van de <div> (parent) lukt me ook niet, heb al van alles geprobeerd.

Alvast bedankt voor alle hulp :)

HTML: 
<!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">
  <head>
    <style type="text/css">
      body {
        background: #EEE;
        behavior: url(csshover.htc); /* WinIE behavior call */
      }
	  h1:hover em {color:green;}
	  /*h1:hover {color:red;}*/
	  div:hover .parent {color:red;}
	  
	  
	  
      div.parent {
        position: absolute;
        left: 150px;
        top: 150px;
        background: #00F; /* blue */
        height: 250px;
        width: 150px;
        padding: 50px;
      }
      div.child {
        background: #FF0; /* yellow */
        height: 50px;
        width: 50px;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Dit is wat <em>tekst</em> en <em>tekst</em> en nog meer <em>tekst</em> zodat je wat kunt zien</h1>

    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </body>
</html>
 
Oplossing voor de <em>
HTML: 
h1 em:hover { color:green;}
en voor de div's
HTML: 
div.parent:hover {background:red;}
 
Pas op... het werkt niet met IE...

die kan alleen hovers aan op een link, elke ander geeft hij een interne foutmelding (gevolg, hij doet niets..).
Er is iets op te doen, maar daar zou je even op moeten googlen.
 
Klopt, daarom ook deze: behavior: url(csshover.htc); /* WinIE behavior call */

dan werkt het wel in IE (7 getest).

HTML: 
<!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">
  <head>
    <style type="text/css">
      body {
        background: #EEE;
        behavior: url(csshover.htc); /* WinIE behavior call */
      }
	  h1 em:hover {color:green;}
	  div.parent:hover {background:red;}
      .child:hover {background:green;}


	  
	  
      div.parent {
        position: absolute;
        left: 150px;
        top: 150px;
        background: #00F; /* blue */
        height: 250px;
        width: 150px;
        padding: 50px;
      }
      div.child {
        background: #FF0; /* yellow */
        height: 50px;
        width: 50px;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Dit is wat <em>tekst</em> en <em>tekst</em> en nog meer <em>tekst</em> zodat je wat kunt zien</h1>

    <div class="parent">
      <div class="child"></div>
      <div class="child"></div>
    </div>
  </body>
</html>

Ik heb hem nu iets veranderd. Maar is het ook mogelijk om de zwarte tekst een andere kleur mee te geven zonder dat de <em> tekst mee kleurt ?
Want wanneer je de <h1> pakt, veranderd uiteraard de hele regel van kleur. Zelfde geldt eigenlijk voor de <div's>, die verkleuren nu wel maar kan dat ook afzonderlijk ?
 
Niet dat ik weet, waarschijnlijk zul je ze dan een aparte class moeten geven.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan