[H] <li> Hover-Effekt

Kralle123 · 25.01.2011, 17:53

Hey,
ich habe ein Problem, dass mein Hover-Effekt nur "über das <a> geht, und nicht über <li>".

Codes:

PHP-Code:

                  <ul id="menu">
                    <li class="menu_hover"><a href="#">Home</a></li>&emsp;
                    <img src="./images/platzhalter.png" align="middle"/>
                    &emsp;<li class="menu_hover"><a href="#">Anmelden</a></li>&emsp;
                    <img src="./images/platzhalter.png" align="middle"/>
                    &emsp;<li class="menu_hover"><a href="#">Community</a></li>&emsp;
                    <img src="./images/platzhalter.png" align="middle"/>
                    &emsp;<li class="menu_hover"><a href="#">News & Events</a></li>&emsp;
                    <img src="./images/platzhalter.png" align="middle"/>
                    &emsp;<li class="menu_hover"><a href="#">Sponsors</a></li>&emsp;
                    <img src="./images/platzhalter.png" align="middle"/>
                    &emsp;<li class="menu_hover"><a href="#">Prämien</a></li>&emsp;
                    <img src="./images/platzhalter.png" align="middle"/>
                    &emsp;<li class="menu_hover"><a href="#">Blog</a></li>&emsp;
                    <img src="./images/platzhalter.png" align="middle"/>
                    &emsp;<li class="menu_hover"><a href="#">Contact us</a></li>
                </ul>

PHP-Code:

  li.menu_hover {font-size: 12pt;display: inline;list-style:none;}
li.menu_hover:link    { color:#00f; background-color:transparent; }
li.menu_hover:visited { color:#00f; background-color:transparent;}
li.menu_hover:hover   {  background-image: url(./images/menu_hover.png); background-color:#00f; }
li.menu_hover:active  {  background-image: url(./images/menu_hover.png); background-color:#a03;}

#menu{
list-style-type: none;
}

#menu li.menu_hover {
display: inline;
height: 40px;
width: 40px;
}

Ich hoffe ihr versteht, was ich meine. Hier noch ein Bild, was es vllt besser beschreibt:
http://img109.imageshack.us/i/aufzeichnenyg.jpg/

Das Bild, welches als Hover-Effekt genutzt wird, wird nur so groß wie der Link angezeigt, soll aber größer angezeigt werden.

Lg

nikosch · 25.01.2011, 18:10

Dein Code ist voller Fehler. Nicht-li-Elemente zwischen <li> sind nicht erlaubt.
:link und :visited gibts nur für Links, nicht für andere Elemente. Und offensichtlich sind Deine Listfelder nicht größer, wenn Du sie mit Images auseinanderdrückst. Benutze eine width-Angabe.

mquadrat · 25.01.2011, 18:22

Dein li ist auch genau so breit wie dein Link. Schau dir das mal mit Firebug oder ähnlichem an und markiere eines der li.

@nikosch
width ist auf den li gesetzt, allerdings mit display inline...

Kralle123 · 25.01.2011, 18:41

Danke schonmal für die Antworten.
Wie kann ich das denn regeln, wenn ich keine <a> zwischen den li-Elementen haben darf?

Liebe Grüße

Edit: Bzw wie kann ich nun das li bzw a "größer" machen? Sehe im Firebux, dass es ganz klein ist.

nikosch · 25.01.2011, 18:43

Zwischen bedeutet

PHP-Code:

  </li> _hier_ <li>

Manko10 · 25.01.2011, 18:43

Zitat:

ich habe ein Problem, dass mein Hover-Effekt nur "über das <a> geht, und nicht über <li>".

Dazu die Frage: bist du sicher, dass du auch einen Browser verwendest? IE6 zählt nicht.

Kralle123 · 25.01.2011, 18:46

Achso ok, aber ich wüsste jetzt trotzdem nicht, wie ich das <li> definieren kann?

Ja den FF

mquadrat · 25.01.2011, 19:19

Setz die Breite auf dem Link (mit Display: block). Sollte deine li auf die gewünschte Breite ziehen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Navileiste	saaja	HTML, Usability und Barrierefreiheit	11	07.12.2010 14:15
[Erledigt] Kein Hover auf Bildlinks	Der_Seb	HTML, Usability und Barrierefreiheit	32	06.11.2010 12:46
[Erledigt] Bildervorschau Effekt	abdullah	PHP Tipps 2010	4	03.04.2010 12:47
[Erledigt] dynamischen signatur zeigt fehler "grafik kann nicht angezeigt werden" an	steive	PHP Tipps 2009	33	12.11.2009 11:31
CSS Slide-Menu verändern	K3HLIM	JavaScript, Ajax und mehr	1	21.04.2009 21:10
Hover nicht nebeneinander	wers1	HTML, Usability und Barrierefreiheit	11	18.08.2008 07:23
Unterstrichener Text als Hover Effekt	R4v3r	HTML, Usability und Barrierefreiheit	10	10.04.2008 17:30
JS: Spezieller Image Hover	GSJLink	HTML, Usability und Barrierefreiheit	7	18.06.2007 17:24
CSS Hover	JanM	HTML, Usability und Barrierefreiheit	3	27.06.2006 21:13
[Erledigt] Idee für einen visuellen Effekt		HTML, Usability und Barrierefreiheit	6	02.05.2006 21:56
Frage zu Effekt	BEGINNER-L	HTML, Usability und Barrierefreiheit	2	08.03.2006 13:35
Javascript Newbe.. Per Hover Bild in einem Div ändern...		HTML, Usability und Barrierefreiheit	1	23.09.2005 10:02
Hover Effekt für Textfelder?	Masteroi	HTML, Usability und Barrierefreiheit	3	27.07.2005 14:36
farbe von tabellenzeile verändern bei hover		HTML, Usability und Barrierefreiheit	4	04.07.2005 09:40
[CSS] Table und :hover ???		HTML, Usability und Barrierefreiheit	16	21.01.2005 15:17

25.01.2011, 17:53
Kralle123 Neuer Benutzer Registriert seit: 01.10.2010 Beiträge: 25 PHP-Kenntnisse: Anfänger	[H] <li> Hover-Effekt Hey, ich habe ein Problem, dass mein Hover-Effekt nur "über das <a> geht, und nicht über <li>". Codes: PHP-Code: <ul id="menu"> <li class="menu_hover"><a href="#">Home</a></li>&emsp; <img src="./images/platzhalter.png" align="middle"/> &emsp;<li class="menu_hover"><a href="#">Anmelden</a></li>&emsp; <img src="./images/platzhalter.png" align="middle"/> &emsp;<li class="menu_hover"><a href="#">Community</a></li>&emsp; <img src="./images/platzhalter.png" align="middle"/> &emsp;<li class="menu_hover"><a href="#">News & Events</a></li>&emsp; <img src="./images/platzhalter.png" align="middle"/> &emsp;<li class="menu_hover"><a href="#">Sponsors</a></li>&emsp; <img src="./images/platzhalter.png" align="middle"/> &emsp;<li class="menu_hover"><a href="#">Prämien</a></li>&emsp; <img src="./images/platzhalter.png" align="middle"/> &emsp;<li class="menu_hover"><a href="#">Blog</a></li>&emsp; <img src="./images/platzhalter.png" align="middle"/> &emsp;<li class="menu_hover"><a href="#">Contact us</a></li> </ul> PHP-Code: li.menu_hover {font-size: 12pt;display: inline;list-style:none;} li.menu_hover:link { color:#00f; background-color:transparent; } li.menu_hover:visited { color:#00f; background-color:transparent;} li.menu_hover:hover { background-image: url(./images/menu_hover.png); background-color:#00f; } li.menu_hover:active { background-image: url(./images/menu_hover.png); background-color:#a03;} #menu{ list-style-type: none; } #menu li.menu_hover { display: inline; height: 40px; width: 40px; } Ich hoffe ihr versteht, was ich meine. Hier noch ein Bild, was es vllt besser beschreibt: http://img109.imageshack.us/i/aufzeichnenyg.jpg/ Das Bild, welches als Hover-Effekt genutzt wird, wird nur so groß wie der Link angezeigt, soll aber größer angezeigt werden. Lg Geändert von Kralle123 (25.01.2011 um 17:59 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

25.01.2011, 18:10
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Dein Code ist voller Fehler. Nicht-li-Elemente zwischen <li> sind nicht erlaubt. :link und :visited gibts nur für Links, nicht für andere Elemente. Und offensichtlich sind Deine Listfelder nicht größer, wenn Du sie mit Images auseinanderdrückst. Benutze eine width-Angabe. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

25.01.2011, 18:22
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Dein li ist auch genau so breit wie dein Link. Schau dir das mal mit Firebug oder ähnlichem an und markiere eines der li. @nikosch width ist auf den li gesetzt, allerdings mit display inline... __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de

25.01.2011, 18:41
Kralle123 Neuer Benutzer Registriert seit: 01.10.2010 Beiträge: 25 PHP-Kenntnisse: Anfänger	Danke schonmal für die Antworten. Wie kann ich das denn regeln, wenn ich keine <a> zwischen den li-Elementen haben darf? Liebe Grüße Edit: Bzw wie kann ich nun das li bzw a "größer" machen? Sehe im Firebux, dass es ganz klein ist.

25.01.2011, 18:43
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Zwischen bedeutet PHP-Code: `</li> _hier_ <li>` __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

25.01.2011, 18:46
Kralle123 Neuer Benutzer Registriert seit: 01.10.2010 Beiträge: 25 PHP-Kenntnisse: Anfänger	Achso ok, aber ich wüsste jetzt trotzdem nicht, wie ich das <li> definieren kann? Ja den FF

25.01.2011, 19:19
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Setz die Breite auf dem Link (mit Display: block). Sollte deine li auf die gewünschte Breite ziehen. __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de