css Opazität Auswirkungen auf Geschwister Opazität

Question

[EDIT: Aufgrund eines Fehlers beim Erstellen dieser Frage von es ist Javascript-basierte Original, diese Frage ist obsolet.]

Ich habe eine HTML-Seite, die eine Matrix der neuesten Build-Zustände unserer verschiedenen Produkte und mehrere Versionen zeigt.

In dieser Matrix werden ältere Builds ausgeblendet, indem opacity: .5 durch Zuweisen einer zusätzlichen Stilklasse "stale" festgelegt wird.
Diese Matrix zeigt auch die Ergebnisse der durchgeführten Tests. Das Testergebniselement ist ein Geschwisterelement zum Erstellungselement und überlagert es teilweise.

Mein Problem ist jetzt, dass wenn das 'build' Element ausgeblendet wird, das 'test' Element ebenfalls ausgeblendet wird. Zunächst möchte ich verstehen, warum und zweitens möchte ich nicht das Ergebnis "Test" transparent sein.

table { border: 1px solid darkgrey; } 
 
td { border: 1px solid darkgrey; overflow: hidden; } 
 
div { text-align: center; } 
 
.build { 
 
    border: solid black 1px; 
 
    width: 10em; 
 
    margin: 0.2em; 
 
    padding: 0.2em; 
 
    font-size: 1.0em; 
 
} 
 
.test { 
 
    float: right; 
 
    border: solid lightgrey 1px; 
 
    width: 3em; 
 
    margin-top: -0.8em; 
 
    margin-right: -0.4em; 
 
    // opacity: .99;  // workaround 
 
} 
 
.fail { background-color: rgb(255, 150, 150); } 
 
.ok { background-color: rgb(170, 255, 170); } 
 
.red { background-color: rgb(255, 150, 150); } 
 
.green { background-color: rgb(150, 255, 150); } 
 
.stale { opacity: .5; }

<table> 
 
    <tr> 
 
    <th>Version</th> 
 
    <th>Product A</th> 
 
    <th>Product B</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1.1</td> 
 
    <td> 
 
     <div class="build ok">success</div> 
 
     <div class="test green">100%</div> 
 
    </td> 
 
    <td> 
 
     <div class="build ok">success</div> 
 
     <div class="test red">98%</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>1.0</td> 
 
    <td> 
 
     <div class="build ok stale">success</div> 
 
     <div class="test red">99%</div> 
 
    </td> 
 
    <td> 
 
     <div class="build fail stale">failure</div> 
 
    </td> 
 
    </tr> 
 
</table>

(mit Firefox 52.1 ESR, Chrome 58 getestet) Ich tat etwas Forschung und kam über die SO css opacity affecting sibling image opacity in Frage, sondern das Hinzufügen position und z-index (auf einem oder beiden der Stilklassen build und test) löste mein Problem nicht. Die einzige Methode, die ich bisher gefunden habe, um dieses Verhalten zu umgehen, besteht darin, meiner .test Stildefinition opacity: .99; hinzuzufügen, aber halte dies nicht für eine saubere Lösung und möchte den Grund dieses Verhaltens besser verstehen.

Answer 1

Sie müssen Ihre <div> Tags ordnungsgemäß schließen.

Das Problem, das auftritt, ist ein Ergebnis des Versuches Ihres Browsers, Ihr Markup zur Laufzeit zu 'reparieren', die <div> Elemente sind falsch miteinander verbunden, so dass sie nicht mehr Geschwister sind.

Das Fixieren Ihres Markups löst Ihr Problem.

table { border: 1px solid darkgrey; } 
 
td { border: 1px solid darkgrey; overflow: hidden; } 
 
div { text-align: center; } 
 
.build { 
 
    border: solid black 1px; 
 
    width: 10em; 
 
    margin: 0.2em; 
 
    padding: 0.2em; 
 
    font-size: 1.0em; 
 
} 
 
.test { 
 
    float: right; 
 
    border: solid lightgrey 1px; 
 
    width: 3em; 
 
    margin-top: -0.8em; 
 
    margin-right: -0.4em; 
 
    // opacity: .99;  // workaround 
 
} 
 
.fail { background-color: rgb(255, 150, 150); } 
 
.ok { background-color: rgb(170, 255, 170); } 
 
.red { background-color: rgb(255, 150, 150); } 
 
.green { background-color: rgb(150, 255, 150); } 
 
.stale { opacity: .5; }

<table> 
 
    <tr> 
 
    <th>Version</th> 
 
    <th>Product A</th> 
 
    <th>Product B</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1.1</td> 
 
    <td> 
 
     <div class="build ok">success</div> 
 
     <div class="test green">100%</div> 
 
    </td> 
 
    <td> 
 
     <div class="build ok">success</div> 
 
     <div class="test red">98%</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>1.0</td> 
 
    <td> 
 
     <div class="build ok stale">success</div> 
 
     <div class="test red">99%</div> 
 
    </td> 
 
    <td> 
 
     <div class="build fail stale">failure</div> 
 
    </td> 
 
    </tr> 
 
</table>