:hover funktioniert nicht mehr?

[bilbo beutlin]

Hi.

Folgender Quelltext HTML-Quelltext:

[..]

  
  <div class="navi_left">  
   <div><strong>Ueberpunkt</strong></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
   <div><strong>Ueberpunkt</strong></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
     <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
   <div><strong>Ueberpunkt</strong></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>  
   </div>  

[..]

ist mit folgendem CSS bearbeitet:

  
 a{  
  color:#000000;  
  text-decoration:none;  
 }

[..]

  
 .navi_left{  
  background-color:#FFFFFF;  
  border:thin solid #000000;  
  width:22%;  
  margin:3% 0 0 3%;  
 }  
  
 .navipoint{  
  width:100%;  
  border-top:thin dashed #CCCCCC;  
  border-bottom:thin dashed #CCCCCC;  
 }  
  
 .navipoint a{  
  margin-left:10%;  
 }  
  
 .navipoint:hover{  
  background-color:#DDDDDD;  
  color:#003366;  
  font-weight:bold;  
 }  

Das Problem liegt bei der Pseudoklasse :hover. Die Hintergrundfarbe und auch das Schriftgewicht wird übernommen, aber die Farbe (ein Orange) wird nicht übernommen. Woran liegt das?

euer bilbo

[Ashura]

Hallo bilbo.

<div class="navipoint"><a href="index.php">Unterpunkt</a></div>

  

> ~~~css
  

>  .navipoint:hover{  
>   background-color:#DDDDDD;  
>   color:#003366;  
>   font-weight:bold;  
>  }  
> 

Das Problem liegt bei der Pseudoklasse :hover. Die Hintergrundfarbe und auch das Schriftgewicht wird übernommen, aber die Farbe (ein Orange) wird nicht übernommen. Woran liegt das?

Weil du nicht die Schriftfarbe im a-Element veränderst, sondern im Div-Element.
BTW: Schon einmal über eine Liste nachgedacht? Eine solche würde sich hier anbieten.

Gruß, Ashura

[Frederik]

Hallo Bilbo!

Das Problem liegt bei der Pseudoklasse :hover. Die Hintergrundfarbe und auch das Schriftgewicht wird übernommen, aber die Farbe (ein Orange) wird nicht übernommen. Woran liegt das?

Na, ich denke mal, das liegt daran, dass für a die Schriftfarbe explizit definiert ist. Probiere doch mal

.navipoint:hover a {
color: #dddddd;
}

Klappt das?

Gruß
Fredo

[bilbo beutlin]

Das Problem liegt bei der Pseudoklasse :hover. Die Hintergrundfarbe und auch das Schriftgewicht wird übernommen, aber die Farbe (ein Orange) wird nicht übernommen. Woran liegt das?

Sorry, früher war es ein Orange, jetzt ist es ein dunkelblau.

Na, ich denke mal, das liegt daran, dass für a die Schriftfarbe explizit definiert ist. Probiere doch mal

.navipoint:hover a {
color: #dddddd;
}

Klappt das?

Eigentlich sollte doch die _Hintergrundfarbe_ geändert werden. Ich habe das "color" jetzt zu "background-color" abgewandelt.

Ja, das klappt zur Hälfte. Das <div> bekommt jetzt aber keine Hintergrundfarbe, sondern das <a>. Aber die Schriftfarbe wird jetzt endlich angenommen.
So wie ich das sehe, wird das in jeder Variation nicht klappen, dass der Hintergrund des div #DDDDDD und die Schriftfarbe #003366 wird, beim hovern vom div, oder sehe ich das falsch?

[Ashura]

Hallo bilbo.

So wie ich das sehe, wird das in jeder Variation nicht klappen, dass der Hintergrund des div #DDDDDD

.navipoint:hover{background-color:#ddd;}

und die Schriftfarbe #003366 wird, beim hovern vom div, oder sehe ich das falsch?

.navipoint:hover a{color:#036;}

Was meinst du? ;)

Gruß, Ashura

[bilbo beutlin]

.navipoint:hover{background-color:#ddd;}
.navipoint:hover a{color:#036;}

Vielen Dank, es funktioniert. Ich wäre nie darauf gekommen, zwei mal :hover verwenden zu müssen, und vor allem, dass dann beide ausgeführt werden.

In Dankbarkeit
bilbo beutlin aus dem Auenland :)

[Detlef G.]

Hallo bilbo

<div class="navi_left">
   <div><strong>Ueberpunkt</strong></div>
    <div class="navipoint"><a href="index.php">Unterpunkt</a></div>

  
Wäre es nicht sinnvoller und weniger aufwändig es so zu machen:  
  
~~~html
  
 <div class="navi_left">  
   <div class="ueberpoint"><strong>Ueberpunkt</strong></div>  
    <div><a href="index.php">Unterpunkt</a></div>  

Oder du verwendest für den Ueberpunkt kein Div sondern eine h2 oder h3,
was zu deiner Seitenstruktur passt. Du könntest die vielen Divs auch ganz
weglassen.

  
 <div class="navi_left">  
   <h2>Ueberpunkt</h2>  
    <a href="index.php">Unterpunkt</a>  

Oder du  verwendest eine Liste:

  
 <dl class="navi_left">  
   <dt>Ueberpunkt</dt>  
    <dd><a href="index.php">Unterpunkt</a></dd>  

oder mehrere:

  
  <ul class="navi_left">  
   <li>Ueberpunkt  
    <ul>  
     <li><a href="index.php">Unterpunkt</a></li>  
     <li><a href="index.php">Unterpunkt</a></li>  
     ...  
    </ul>  
   </li>  
   <li>Ueberpunkt  
    <ul>  
     <li><a href="index.php">Unterpunkt</a></li>  
   ...  

Das CSS dann z.B. so:

  
.navi_left a {  
  display:block;  
  border-top:thin dashed #CCCCCC;  
  border-bottom:thin dashed #CCCCCC;  
  padding-left:10%;  
}  
  
.navi_left a:hover{  
  background-color:#DDDDDD;  
  color:#003366;  
  font-weight:bold;  
}  

Es hängt dann natürlich davon ab, welche Variante verwendet wird. Wenn du
Listen verwendest, musst du dann natürlich auch den Listenelementen die
von dir gewünschten Margins und Paddings geben.
Es sollte aber auf keinen Fall nötig sein, noch extra Klassen zu verwenden,
wenn die einzelnen Elemente über Nachfahrenselektoren angesprochen werden.

Auf Wiederlesen
Detlef