HTML-Listennavigationsproblem mit uneinheitlichem Design

Question

Unser Designer hat eine Navigation entworfen, die visuell so aussieht:

Navigationsleiste

Deren HTML-Struktur ist wie folgt:

<ul>
    <li class="first">Home</li>
    <li>Schools</li>
    <li>Scores</li>
    <li>Sports</li>
    <li>Blogs</li>
    <li>Podcasts</li>
    <li class="last">Forums</li>
</ul>

Ich kann nicht herausfinden, ob es eine Möglichkeit gibt, dies so zu machen, dass, wenn ich mit der Maus über, sagen wir "Sport", dass sowohl die linke und rechte Pfeil Bild würde die Farben ändern, um die dunkleren rot. Gibt es eine Möglichkeit, dies zu tun?

Dies ist mein bisheriges CSS, aber es ändert nur den Pfeil rechts vom Link:

#mainNav ul li{
    float: left;
    background-color: #ed1c24;
    padding: 7px;
    padding-right: 21px;
    background-image: url('/images/red_arrow.png');
    background-repeat: no-repeat;
    background-position: right;
}
    #mainNav ul li.first{
        padding-left: 14px;
    }
    #mainNav ul li a{
        text-decoration: none;
        color: #FFF;
    }
#mainNav ul li:hover{
    background-color: #d5171f;
    background-image: url('/images/red_arrow2.gif');
}

Answer 1

Sie brauchen so etwas wie das hier: http://jsfiddle.net/2xXQC/

Beachten Sie insbesondere die negative margin-left auf jedem Listenelement, wodurch sie sich überschneiden. Das Bild, das Sie benötigen, sieht etwa so aus:

_____
\    \
/____/

Note to self: Seriously brush up on ASCII art skillz

Außer der ersten. Achten Sie jedoch darauf, welcher Anker ausgewählt wird, wenn der Mauszeiger über das Element fährt. HTML-Elemente sind immer rechteckig, daher gibt es keine Möglichkeit, den Trefferbereich in die Form des Pfeils zu bringen.

Answer 2

Machen Sie einfach das Hover-Bild mit beiden Pfeilen in einem Bild, dann positionieren Sie es so, dass es beide Pfeile abdeckt.

Answer 3

Ich würde darauf wetten, dass das Hintergrundbild für jeden Listeneintrag nur einen Pfeil nach rechts hat.

Wenn Sie Css verwenden, wirkt sich das nur auf das Hintergrundbild aus, über das Sie tatsächlich schweben.

Wenn Sie dafür Javascript (oder Jquery) verwenden (onHover), haben Sie Zugriff auf ein onHover-Ereignis", mit dem Sie alles andere auf der Seite beeinflussen können, nicht nur das Bild, über das Sie schweben. In diesem Fall möchten Sie das Bild, über das Sie den Mauszeiger halten, sowie das Bild links daneben austauschen.

Answer 4

Wenn Ihre red_arrow.png und red_arrow2.gif haben beide Pfeile können Sie in der Lage sein, um mit z-index, aber es wird eine Menge zwicken, um alles richtig ausgerichtet zu bekommen.

Wahrscheinlich ist es besser, ein css-Sprite zu verwenden und die Hover-Position in css fein abzustimmen.

Siehe Linktext für einige gute Tutorials und Ideen.

Answer 5

Sie müssen kein Javascript verwenden. CSS-Sprites erledigen den Job für Mouseover. Hier ist ein guter Artikel:

http://www.dave-woods.co.uk/index.php/mouseover-images-using-css-sprites/

Hier sehen Sie diese Technik in Aktion: http://www.rackspace.com/apps

EDIT: Ich sehe das Problem. Sie müssen BEIDE Pfeile machen. Aber Sie können immer noch tun dies mit CSS, erhöhen Sie einfach den z-index für die Hover-Zustände (Sie müssen Ihre Sprite enthalten sowohl die linken und rechten Pfeile):

a:hover { Hintergrund-Position: 0 40px; z-index: 10; }