Wie kann ich die vorherigen Geschwister beim Hover ansprechen?

Ich versuche einen Weg zu finden, das vorherige Geschwister beim Hover anzusprechen. In dieser Geige möchte ich, dass die Schaltfläche "Bearbeiten" grün wird, wenn Sie den Mauszeiger über den gesamten Wrapper bewegen. Wenn Sie die Maus über die Schaltfläche "Löschen" bewegen, wird sie rot und die Schaltfläche "Bearbeiten" wird wieder normal. Da sie beide im selben Elternteil sind (und notwendigerweise sein müssen), scheint dies schwierig zu sein.Wie kann ich die vorherigen Geschwister beim Hover ansprechen?

Ich sollte beachten, ich arbeite in SASS so vielleicht gibt es eine bedingte Möglichkeit, dies zu tun?

FIDDLE

<div class="wrapper"> 
    <button class="btn edit"> 
    Edit 
    </button> 
    <button class="btn delete"> 
    Delete 
    </button> 
</div>

Quelle

2017-12-21 Kirk Ross

Sie können keine vorherigen Geschwister in CSS Ziel, das ist ein XY-Problem. Die Antwort von Cyber bietet eine Lösung ... aber ich bin neugierig, warum die Schaltfläche Bearbeiten grün sein soll, wenn Sie den Wrapper und nicht nur die Schaltfläche Bearbeiten berühren. Auch nein, es gibt nichts, was Sass tun kann, was CSS auch nicht kann; Sass gibt es nur, um Ihnen beim Schreiben von CSS Zeit zu sparen. Es fügt keine neue Funktionalität zu CSS hinzu. – TylerH

Es ist in den Anforderungen einer Komponente, die ich baue. Meine Geige ist eine sehr vereinfachte Version dessen, was ich bauen muss. Ich werde wahrscheinlich nur flexbox und order verwenden, aber ich hatte gehofft, das ReactJS-Markup nicht zu ändern, weil ich es in einem Dutzend Komponenten für das machen muss, was ich mache. –

Sie die Position Ihrer Elemente im Markup invers, dann Flexbox mit umgekehrter Richtung verwendet werden. Auf diese Weise können Sie auf die Schaltfläche "Bearbeiten" klicken, während Sie auf "Löschen" klicken.

Alternativ können Sie einfach Order-Eigenschaft verwenden, aber das hängt davon ab, ob Sie mehr Elemente dort möchten.

https://jsfiddle.net/CyberAP/7pye3e8w/2/

.wrapper { 
 
    border: 1px solid black; 
 
    padding: 40px; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    justify-content: flex-end; 
 
} 
 

 
.btn { 
 
    -webkit-appearance: none; 
 
    border: 1px solid black; 
 
    margin: 10px; 
 
    outline: none; 
 
    padding: 5px 10px; 
 
    font-size: 18px; 
 
    background-color: #ddd; 
 
} 
 

 
.wrapper:hover .edit { 
 
    background: green; 
 
    color: white 
 
} 
 

 
.wrapper .delete:hover { 
 
    background: red; 
 
    color: white 
 
} 
 

 
.wrapper .delete:hover + .edit { 
 
    background-color: #ddd; 
 
    color: #000; 
 
}

<div class="wrapper"> 
 
    <button class="btn delete"> 
 
    Delete 
 
    </button> 
 
    <button class="btn edit"> 
 
    Edit 
 
    </button> 
 
</div>

Quelle

2017-12-21 20:00:29 CyberAP

Wie kann ich die vorherigen Geschwister beim Hover ansprechen?

Antwort

Verwandte Themen