Suche im Forum:
Suchen


Autor Nachricht
Beitrag12.01.2011 um 17:03 (UTC)    
Titel: Unterklassen Hover
Antworten mit Zitat
hey ich habe eine Frage:

Wie schaffe ich es beim "hovern" der Maus über eine Klasse, dei anderen Klassen den Hover Effekt auszulösen?

Ich möchte nämlich einen Button entwerfen und schaffe es einfach nicht, dass sich wenn ich mit der Maus über die Mitte des Buttons fahre, auch die beiden Enden verändern.

Habe es mit diesem Code vergeblich versucht:

Code:

<style type="text/css">
.Button .text {padding:3px;background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-content.png);font-weight:bold;text-shadow: 1px 1px 0px #E5E5E5;}
.Button .rand_l {background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-rand-l.png);width:7px;height:27px;}
.Button .rand_r {background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-rand-r.png);width:7px;height:27px;}

.Button:hover .text {padding:3px;height:21px;background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-hover-content.png);}
.Button:hover .rand_l {background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-hover-rand-l.png);width:7px;height:27px;}
.Button:hover .rand_r {background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-hover-rand-r.png);width:7px;height:27px;}
</style>

<table class="Button" cellspacing="0" cellpadding="0"><tr><td class="rand_l"> </td><td class="text">Button</td><td class="rand_r"> </td></tr></table>


Ich weiß: die Frage ist etwas anspruchsvoller aber ich weiß auch dass hier im Forum manche "Hobbybastler" zu Gange sind, die einiges auf dem Kasten haben. habt ihr vielleicht eine Idee?
↑
Beitrag12.01.2011 um 20:36 (UTC)    
Titel: Re: Unterklassen Hover
Antworten mit Zitat
faith-for-germany hat Folgendes geschrieben:

Code:

<style type="text/css">
.Button.text {padding:3px;background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-content.png);font-weight:bold;text-shadow: 1px 1px 0px #E5E5E5;}
.Button.rand_l {background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-rand-l.png);width:7px;height:27px;}
.Button.rand_r {background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-rand-r.png);width:7px;height:27px;}

.Button.text:hover  {padding:3px;height:21px;background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-hover-content.png);}
.Button.rand_l:hover  {background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-hover-rand-l.png);width:7px;height:27px;}
.Button.rand_r:hover  {background-image:url(http://img.webme.com/pic/f/faith-for-germany/button-hover-rand-r.png);width:7px;height:27px;}
</style>

<table class="Button" cellspacing="0" cellpadding="0"><tr><td class="rand_l"> </td><td class="text">Button</td><td class="rand_r"> </td></tr></table>

Normalerweise soll zwischen zwei Klassen (.Button.text) kein Leerzeichen sein, soweit ich weis.
Dann hast du den Hover-Code falsch eingefügt.
Das Attribut :hover gehört immer ganz ans Ende der "Wegbeschreibung" (.Button.text:hover).
Ich habe den Code korrigiert.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
↑
Beitrag12.01.2011 um 20:52 (UTC)    
Titel: Re: Unterklassen Hover
Antworten mit Zitat
badweb hat Folgendes geschrieben:
Normalerweise soll zwischen zwei Klassen (.Button.text) kein Leerzeichen sein, soweit ich weis.
Dann hast du den Hover-Code falsch eingefügt.
Das Attribut :hover gehört immer ganz ans Ende der "Wegbeschreibung" (.Button.text:hover).
Ich habe den Code korrigiert.


Du kannst kein CSS, oder?
Bei Verschachtelungen der Klassen gehört sehr wohl ein Leerzeichen dazwischen.
Ebenso gehört das Hover nicht immer ans Ende, sondern dort hin, wo etwas geschehen soll, bei einem hover... Rolling Eyes
Die Sprache ist schon ein wenig flexibler.


@faith-for-germany
Wenn ich deinen Code teste... ist doch alles in Ordnung?
Wie soll es denn anders weden als so, wie es derzeit sowieso ist? Bei mir klappt das einwandfrei, schönes hover für die buttonteile.
______________
↑
Beitrag12.01.2011 um 21:39 (UTC)    
Titel: Re: Unterklassen Hover
Antworten mit Zitat
AsgarSerran hat Folgendes geschrieben:
Du kannst kein CSS, oder?
Bei Verschachtelungen der Klassen gehört sehr wohl ein Leerzeichen dazwischen.
Ebenso gehört das Hover nicht immer ans Ende, sondern dort hin, wo etwas geschehen soll, bei einem hover... Rolling Eyes
Die Sprache ist schon ein wenig flexibler.


Asgar du kränkst mich gerade.
Vielleicht beherrsche ich CSS nicht, aber ich kann es.
Und da ich es mir selbst beigebracht habe kann es auch sehr gut sein, dass meine Kenntnise lückenhaft sind.

Bei einer Verschachtelung sind die Leerzeichen meiner Erfahrung nach nicht nötig.

Und beim Hover verstehe ich allerdings dann nicht, was dann die zusätzliche Klasse hintendrann da sucht.
Statt
.Button:hover .text
kann ich dann doch einfach
.Button:hover
schreiben.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
↑
Beitrag12.01.2011 um 21:45 (UTC)    
Titel:
Antworten mit Zitat
Es gibt einen Unterschied zwischen
Code:
.Button:hover .text

und
Code:
.Button:hover



Zur Erläuterung:
Code:
.Button:hover .text

Wenn man mit der Maus über .Button fährt, ändert sich .text

Code:
.Button:hover

Wenn man mit der Maus über .Button fährt, ändert sich .Button.

Eigentlich eine logische Sache.
Man geht nur die Reihenfolge durch. Der CSS-Code hat Einfluss auf .text, welches eine Unterklasse eines gehoverten .Buttons ist. Beim zweiten ist es ein normales Hover des .Buttons..


Achja.. doch die Leerzeichen sind notwendig bei dieser Verschachtelung.
Könnte sein, dass manche Browser dies Debuggen können, jedoch ist es nicht Standardkonform (z.B. Chromium und Opera würden dies nicht mehr korrekt erkennen...). Das Leerzeichen lässt du weg, wenn du es an ein Element bindest.
Mit dem Leerzeichen weist du auf Verschachtelung hin.



edit: Ich habe mir CSS übrigens auch selbst beigebracht.
Jedoch lernt man durch ausprobieren und korrigieren. Deine Aussagen hättest du vorher testen können - hast du aber wohl nicht getan. Firefox 3.6 macht es ohne Leerzeichen btw. auch nicht..
______________


Zuletzt bearbeitet von AsgarSerran am 12.01.2011, 22:49, insgesamt 2-mal bearbeitet
↑
Beitrag14.01.2011 um 14:24 (UTC)    
Titel:
Antworten mit Zitat
okay danke schonmal für die Antworten Smile

Also bei mir klappt da gar nicht! : http://base-of-truth.de/new_page.php

Habe genau diesen Code genommen. Doch dieser legt alle hover-Effekte meiner Seite komplett lahm. Das verstehe ich einfach nicht, da dieser Code theoretisch einwandfrei ist.

PS: Ich habe mir CSS auch selbst beigebracht Wink Ich denke das hat jeder beim HPBK Razz
↑
Beitrag14.01.2011 um 14:28 (UTC)    
Titel:
Antworten mit Zitat
sorry wegen doppelpost.

Habe den Fehler selbst gefunden!! An dem Code lags nicht, sondern ich habe den header meiner test-seite nicht komplett am Anfang, sondern erst nach dem Style-Code included Wink

Trotzdem Danke an euch Smile

PS: Ihr dürft diesen Code übrigens auch verwenden Wink
↑
Beiträge der letzten Zeit anzeigen:   
  • Seite 1 von 1

  •  
    • Gehe zu:  


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de

© 2025 webme GmbH, Deutschland. Alle Rechte vorbehalten.