XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   CSS Workaround für vorheriges Geschwisterelement (http://xhtmlforum.de/showthread.php?t=70532)

1chris 20.01.2014 13:02

CSS Workaround für vorheriges Geschwisterelement
 
Ahoi

Ich suche praktisch das Gegenstück zum "+" Selektor. Wenn ich z.B. eine Liste mit 5 Einträgen habe und :hover den 3., dann soll der 2. und 4. markiert werden.

Das 4. Item wäre:
Code:

ul li:hover + li { background:red; }
Wie erwische ich das 2. Item? Eine JavaScriptlösung wollte ich umgehen, wenn es auch einen reinen CSS Trick gibt. Im Bestfall funktioniert die Lösung auch mit IE9.

Danke und Danke

PS: Html Code ist ja ansich egal, aber damit es vollständig ist:
HTML-Code:

<html>
            <body>
                <div>
                    <ul>
                        <li>abc</li>
                        <li>abc</li>
                        <li>abc</li>
                        <li>abc</li>
                        <li>abc</li>
                    </ul>
                </div>
            </body>
            </html>


explanator 20.01.2014 15:21

Zitat:

Zitat von 1chris (Beitrag 536467)
Ich suche praktisch das Gegenstück zum "+" Selektor. Wennich z.B. eine Liste mit 5 Einträgen habe und :hover den 3., dann soll der 2. und 4. markiert werden.

Das geht nicht. Mit CSS kann man keine Vorherigen Elemente durch ein nachfolgendes hover verändern.

Hier brauchst du Javascript.

gabischatz 21.01.2014 12:10

Ja zum Beispiel das :jQueryKochbuch - JSFiddle

HTML-Code:

<style>
ul li:hover + li,
.hover{ background:red; }</style>
<div>
    <ul>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
        <li>abc</li>
    </ul>
</div>

<script>
jQuery('li')
  .hover(function()  // Hover mit anonyme Funktion
            {
                $(this)    // Das Selektierte
                  .prev()  // Der Vorgänger
                  .toggleClass("hover");  //Hinzufügen oder Entfernen einer oder mehreren Klassen
            }
        );
<script>

Grüße


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:26 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023