zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Workaround für vorheriges Geschwisterelement

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.01.2014, 12:02
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.10.2009
Beiträge: 176
1chris befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.01.2014, 14:21
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von 1chris Beitrag anzeigen
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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 21.01.2014, 11:10
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 16:09
MYspace mehr als nur CSS oder ? Vinceone CSS 0 12.07.2007 02:21
Eric Meyer's CSS Petty Ressourcen 0 21.11.2005 08:18
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 11:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:46 Uhr.