machen bestimmte Informationen angezeigt werden, wenn ein bestimmtes Bild schwebte ist

Question

Ich habe folgende CSS und HTML:

<div class="container"> 
<img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg"> 
<img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg"> 
<p class="name glenn">Glenn</p> 
<p class="title glenn">Part Owner/Senior Inspector</p> 
<p class="bio glenn">I am Glenn hear me roar!</p></img> 
<p class="name dave">Dave</p> 
<p class="title dave">Part Owner/ Manager</p> 
<p class="bio dave">I am Dave hear me roar!</p> 
</div> 

.container { 
    height: 500px; 
    width: 100%; 
    border: 2px solid black; 
} 

.imag { 
    height: 100px; 
    width: 100px; 
    float: left; 
} 

.name { 
    position: absolute; 
    top: 50vh; 
} 

.title { 
    position: absolute; 
    top: 50vh; 
    left: 25vw; 
} 

.bio { 
    position: absolute; 
    top: 50vh; 
    left: 50vw; 
} 

.glenn { 
    opacity: 0; 
} 

.dave { 
    opacity: 0; 
} 

.one:hover .glenn { 
    opacity: 1 !important; 
} 

.one:hover { 
    opacity: 0.5; 
} 

ich möchte, wenn Glenns Bild (.one) dann das ganze Zeug mit der Klasse von glenn schweben sollte erscheinen, und wenn man das Bild von dave (.two) schwebt, sollten alle Sachen mit .dave erscheinen. Wie kann ich das mit dieser Konfiguration machen?

Answer 1

Sie für den ~General sibling combinator Wähler suchen

<div class="container"> <img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg"> <img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg"> <p class="name glenn">Glenn</p> <p class="title glenn">Part Owner/Senior Inspector</p> <p class="bio glenn">I am Glenn hear me roar!</p></img> <p class="name dave">Dave</p> <p class="title dave">Part Owner/ Manager</p> <p class="bio dave">I am Dave hear me roar!</p> </div> .container { 
 
    height: 500px; 
 
    width: 100%; 
 
    border: 2px solid black; 
 
} 
 
.imag { 
 
    height: 100px; 
 
    width: 100px; 
 
    float: left; 
 
} 
 
.name { 
 
    position: absolute; 
 
    top: 50vh; 
 
} 
 
.title { 
 
    position: absolute; 
 
    top: 50vh; 
 
    left: 25vw; 
 
} 
 
.bio { 
 
    position: absolute; 
 
    top: 50vh; 
 
    left: 50vw; 
 
} 
 
.glenn { 
 
    opacity: 0; 
 
} 
 
.dave { 
 
    opacity: 0; 
 
} 
 
.one:hover ~ .glenn { 
 
    opacity: 1 !important; 
 
} 
 
.one:hover { 
 
    opacity: 0.5; 
 
} 
 
.two:hover ~ .dave { 
 
    opacity: 1 !important; 
 
} 
 
.two:hover { 
 
    opacity: 0.5; 
 
}

<div class="container"> 
 
    <img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg"> 
 
    <img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg"> 
 
    <p class="name glenn">Glenn</p> 
 
    <p class="title glenn">Part Owner/Senior Inspector</p> 
 
    <p class="bio glenn">I am Glenn hear me roar!</p> 
 
    <p class="name dave">Dave</p> 
 
    <p class="title dave">Part Owner/ Manager</p> 
 
    <p class="bio dave">I am Dave hear me roar!</p> 
 
</div>