Hover Background in der Navigation

[Donco]

Hallo,

Ich habe ein kleines CSS Problem. Ich nutze bei meinem neuen modified eCommerce Shopsoftware 1.05 Shop das Standard Template.
Ich hätte gerne einen Hover Effekt in der Navigationsleiste. Mein CSS sieht an der Stelle so aus:

Code: CSS  [Auswählen]

#topmenu li a:hover{
background-image: url("img/hover.gif");
text-decoration: none;
}

Der Hover Background ist jetzt leider nur über den jeweiligen Text Links und geht nicht bis zur Trennlinie.
Wie kann ich es realisieren , dass der Hover Effekt über die gesamte Breite des Buttons geht? Vielen Dank im voraus!

Beste Grüße

Marius

Linkback: https://www.modified-shop.org/forum/index.php?topic=15223.0

[Soeldner]

Probiere mal ein:

Code: CSS  [Auswählen]

display: block;

[Donco]

Das hat leider nicht funktioniert. (siehe Screenshot)

[spittel]

Code: CSS  [Auswählen]

#topmenu li:hover{
background-image: url("img/hover.gif");
text-decoration: none;
}

[Donco]

Vielen Dank! Das hat geklappt. 

[Soeldner]

Ok, so rum. Hab mich an dem "a:hover" orientiert und nicht bis zu den Trennlinien links <-> rechts gelesen.

Gruß

[Donco]

Ein kleiner Fehler tritt noch auf. Und zwar verschwindet jeweils der rechte Trennstrich unter dem Hover. Der linke Trennstrich bleibt sichtbar. Wie erreiche das der rechte Trennstrich ebenfalls sichtbar bleibt?

[Donco]

Ich konnte das Problem mit dem Trennstrich noch nicht beheben. Vielleicht hat jemand eine Idee wie ich erreiche, dass sich der rechte Trennstrich automatisch bei einem aktiven Hover 1px verschiebt und dadurch nicht mehr verdeckt wird.

[h-h-h]

Guten Morgen Marius,

füge dafür einfach hier

Code: CSS  [Auswählen]

.lightBlue li {

folgendes hinzu:

Code: CSS  [Auswählen]

padding-right: 1px;

Gruß

h-h-h

[Donco]

@ h-h-h, ich nutze bei meinem neuen Projekt das modified eCommerce Shopsoftware 1.5 Standard Template. Daher hat das nicht leider nicht funktioniert. Der Code der "Breakline" sieht so aus:

Code: CSS  [Auswählen]

#topmenu li {
        height:36px;
        float:left;
        padding: 0px 26px;
        margin:0;
        background: url(img/bg_topmenu_breakline.gif) no-repeat;
        background-position:right;
}

Der Hover wurde wie oben beschrieben realisiert:

Code: CSS  [Auswählen]

    #topmenu li:hover{
    background-image: url("img/hover.gif");
    text-decoration: none;
    }

[hedon02]

bei "hover" vergibst Du einen neuen Hintergrund wodurch die Trennlinie verschwindet. Du kannst entweder "hover" auf den "link" legen, oder den "hover-Effekt" durch "background-color" erzielen.

Also: statt:

Code: CSS  [Auswählen]

#topmenu li:hover{
  background-image: url("img/hover.gif");
}

z.B.:

Code: CSS  [Auswählen]

#topmenu li:hover{
  background-color: #333;
}

[Eddy]

Ich konnte das Problem mit dem Trennstrich noch nicht beheben. Vielleicht hat jemand eine Idee wie ich erreiche, dass sich der rechte Trennstrich automatisch bei einem aktiven Hover 1px verschiebt und dadurch nicht mehr verdeckt wird.

Falls es noch von Interesse ist:
Ich habe das Problem so gelöst, dass ich dem "hover.gif" Bild ganz rechts das spacer-Bild draufgeheftet habe.
Dann noch das hover rechts ausgerichtet:

Code: CSS  [Auswählen]

#topmenu li:hover {
    background: url(img/hover.gif);
        text-decoration: none;
        background-position:right;

So erzeugt der Hover einen eigenen Pseudo-Spacer, sieht absolut sauber aus.
Du musst nur darauf achten, das "hover.gif" lang genug zu machen (länger als Standard) damit sich der Pseudo-Spacer bei längeren Menüwörtern nicht wiederholt.

Grüße
Eddy

[h-h-h]

Bin mir jetzt nicht sicher, doch ich meine li:hover funktioniert nicht in allen Browser, daher sollte a:hover verwendet werden.
Daher müsste die Breite & Höhe des Links an die des LIs angepasst werden.

Gruß

h-h-h

[Matt]

Bin mir jetzt nicht sicher, doch ich meine li:hover funktioniert nicht in allen Browser, daher sollte a:hover verwendet werden.
[...]

Konkret ist es ein Browser. Der mit dem blauen "e". Aber auch da sollte es mit neueren Versionen gehen. Alten kann man mit etwas Javascript auf die Sprünge helfen.