Div Hover funktioniert nicht

[Merius]

Folgendes: Wenn ich über das Div, der Klasse h_sword fahre soll das Div versteckt werden, ansonsten soll es angezeigt werden.
Wenn ich über das Div fahre passiert aber leider gar nichts, ich denke dass es ein Syntax Problem ist aber ich finde die richtige Lösung einfach nicht :/

Ich habe folgende style Information:

  
  <style type="text/css" media="screen">  
   div.h_sword:hover {visibility:hidden;}  
  </style>

Das Div sieht so aus:

  
        <div style='width:400px; height:438px; background-image:url(show01.JPG); border:3px solid silver; margin-left:auto; margin-right:auto; position:relative;'>  
  
         <div class="h_sword" style='width:32px; height:148px; background-image:url(highlite_sword.JPG); visibility:visible; position:absolute; left:14px; top:3px;'>  
         </div>  
  
        </div>  

[Sven Rautenberg]

Moin!

Folgendes: Wenn ich über das Div, der Klasse h_sword fahre soll das Div versteckt werden, ansonsten soll es angezeigt werden.
Wenn ich über das Div fahre passiert aber leider gar nichts, ich denke dass es ein Syntax Problem ist aber ich finde die richtige Lösung einfach nicht :/

Deine Style-Angabe für die Eigenschaft "visibility" hat eine niedrigere Priorität als die Angaben im Style-Attribut des DIV.

<style type="text/css" media="screen">
   div.h_sword:hover {visibility:hidden;}
  </style>

>   
> Das Div sieht so aus:  
> ~~~html
  

>          <div class="h_sword" style='width:32px; height:148px; background-image:url(highlite_sword.JPG); visibility:visible; position:absolute; left:14px; top:3px;'>  
>          </div>  
> 

- Sven Rautenberg

[Sven Rautenberg]

Moin!

Moin!

Folgendes: Wenn ich über das Div, der Klasse h_sword fahre soll das Div versteckt werden, ansonsten soll es angezeigt werden.
Wenn ich über das Div fahre passiert aber leider gar nichts, ich denke dass es ein Syntax Problem ist aber ich finde die richtige Lösung einfach nicht :/

Deine Style-Angabe für die Eigenschaft "visibility" hat eine niedrigere Priorität als die Angaben im Style-Attribut des DIV.

Link vergessen: http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet

- Sven Rautenberg

[Merius]

Okay, ich habe das Problem verstanden, allerdings ist mir noch nicht ganz klar WO ich jetzt die Style-Angabe WIE verlinken muss?

Deine Style-Angabe für die Eigenschaft "visibility" hat eine niedrigere Priorität als die Angaben im Style-Attribut des DIV.

Link vergessen: http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet

• Sven Rautenberg

[Sven Rautenberg]

Moin!

Okay, ich habe das Problem verstanden, allerdings ist mir noch nicht ganz klar WO ich jetzt die Style-Angabe WIE verlinken muss?

Wenn du nicht auf das Style-Attribut im Div verzichtest, wird das nie klappen.

Die Verwendung von Style-Attributen ist grundsätzlich eine ganz schlechte Idee. Nicht nur, weil diese Attribute immer höchste Priorität haben, d.h. alle dort gemachten Angaben nicht mehr an anderer Stelle durch Stylesheets überschrieben werden können.

- Sven Rautenberg

[Merius]

Okay, ich möchte im Grunde ein Bild haben auf dem man durch mousover(hover) eine Selektion des ausgewählten Bildbereiches simuliert.

Mein Gedanke war, zuerst alle diese kleinen Selektions-DIVs auf invisible zu setzen und bei mousover(hover) auf visible zu setzen. Das sollte doch machbar sein, oder?

Wenn du nicht auf das Style-Attribut im Div verzichtest, wird das nie klappen.

Die Verwendung von Style-Attributen ist grundsätzlich eine ganz schlechte Idee. Nicht nur, weil diese Attribute immer höchste Priorität haben, d.h. alle dort gemachten Angaben nicht mehr an anderer Stelle durch Stylesheets überschrieben werden können.

• Sven Rautenberg

[Auge]

Hallo

Okay, ich möchte im Grunde ein Bild haben auf dem man durch mousover(hover) eine Selektion des ausgewählten Bildbereiches simuliert.

Mein Gedanke war, zuerst alle diese kleinen Selektions-DIVs auf invisible zu setzen und bei mousover(hover) auf visible zu setzen. Das sollte doch machbar sein, oder?

Ja, natürlich ist das machbar. Du sollst die dazu notwendigen CSS-Angaben nur nicht per style-Attribut zuweisen, sondern *sämtlichst* zentral in einer CSS-Datei oder, wie deine Angabe zu :hover (ebenfalls zentral) im <head>-Bereich.

Tschö, Auge

[Merius]

Ja, natürlich ist das machbar. Du sollst die dazu notwendigen CSS-Angaben nur nicht per style-Attribut zuweisen, sondern *sämtlichst* zentral in einer CSS-Datei oder, wie deine Angabe zu :hover (ebenfalls zentral) im <head>-Bereich.

Tschö, Auge

Du meinst so:

  
  <style type="text/css" media="screen">  
   div.h_sword:hover {visibility:visible;}  
   div.h_sword {width:32px; height:148px; background-image:url(highlite_sword.JPG); visibility:hidden; position:absolute; left:14px; top:3px;}  
  </style>

        <div style='width:400px; height:438px; background-image:url(show01.JPG); border:3px solid silver; margin-left:auto; margin-right:auto; position:relative;'>  
  
         <div class="h_sword" >  
         </div>  
  
        </div> 

Funktioniert leider auch nicht x_x

[ChrisB]

Hi,

div.h_sword:hover {visibility:visible;}
   div.h_sword {width:32px; height:148px; background-image:url(highlite_sword.JPG); visibility:hidden; position:absolute; left:14px; top:3px;}

Ueberleg mal, ob das nicht vielleicht ein kleines bisschen unsinnig ist: Du hast das Element zu naechst mal versteckt - wie soll es denn dann, wenn es gar nicht "da" ist, mit der Maus ueberfahren werden und damit der Zustand :hover eintreten koennen?

Vermutlich moechtest du dich mit dem Nachfahrenselektor (Stichwort!) beschaeftigen.
Und dann damit, wenn ein sichtbares Element ueberfahren wird, bei einem von dessen versteckten Nachfahrenelementen die Sichtbarkeit aendern.

MfG ChrisB

[Merius]

Vermutlich moechtest du dich mit dem Nachfahrenselektor (Stichwort!) beschaeftigen.
Und dann damit, wenn ein sichtbares Element ueberfahren wird, bei einem von dessen versteckten Nachfahrenelementen die Sichtbarkeit aendern.

MfG ChrisB

Vielen Dank euch Beiden, jetzt klappt es.
Ich nahm an, dass ein Objekt wenn es versteckt ist trotzdem noch ein Hover Event auslöst, dem ist nicht so!

Habe es jetzt so gelöst:

  [code lang=html]<style type="text/css" media="screen">  
   div.invi_sword {width:32px; height:148px; visibility:visible; position:absolute; left:14px; top:3px;}  
   div.invi_sword:hover div.h_sword {visibility:visible;}  
   div.h_sword {width:32px; height:148px; background-image:url(highlite_sword.JPG); visibility:hidden; position:absolute;}  
  </style>

<div style='width:400px; height:438px; background-image:url(show01.JPG); border:3px solid silver; margin-left:auto; margin-right:auto; position:relative;'>

<div class="invi_sword">
          <div class="h_sword"></div>
         </div>[/code]

</div>

[Sven Rautenberg]

Moin!

Du meinst so:

<style type="text/css" media="screen">
   div.h_sword:hover {visibility:visible;}
   div.h_sword {width:32px; height:148px; background-image:url(highlite_sword.JPG); visibility:hidden; position:absolute; left:14px; top:3px;}
  </style>

>   
> ~~~html

        <div style='width:400px; height:438px; background-image:url(show01.JPG); border:3px solid silver; margin-left:auto; margin-right:auto; position:relative;'>  

>   
>          <div class="h_sword" >  
>          </div>  
>   
>         </div> 

Funktioniert leider auch nicht x_x

Philosophische Frage: Kann man über etwas hovern, was unsichtbar ist?

Ich würde zu Testzwecken anstelle der Visibility erstmal was anderes ändern wollen, beispielsweise die Hintergrundfarbe.

- Sven Rautenberg

[Gunnar Bittersmann]

@@Sven Rautenberg:

Die Verwendung von Style-Attributen ist grundsätzlich eine ganz schlechte Idee.

Das stimmt.

Nicht nur, weil diese Attribute immer höchste Priorität haben, d.h. alle dort gemachten Angaben nicht mehr an anderer Stelle durch Stylesheets überschrieben werden können.

Das stimmt nicht. '!important' existiert.

Live long and prosper,
Gunnar