2017-10-20 4 views
-3

Ich habe dieses Stück Code hierZugriff Element Hintergrund Eigenschaft

.gallery { 
 
    margin: 5px; 
 
    border: 4px solid rgb(249, 255, 249); 
 
    float: left; 
 
    width: 320px; 
 
} 
 

 
.gallery:hover { 
 
    border: 4px solid rgb(190, 231, 255); 
 
} 
 

 
.gallery img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.description { 
 
    padding: 15px; 
 
    text-align: center; 
 
}
<div class="gallery"> 
 
    <a target="_blank" href="#"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/TiddlyMap_Demo_Site_-_0.6.4_-_Snapshot_2.png" alt="testImage" width="600" height="400" /> 
 
    </a> 
 
    <div class="description">Description for the image</div> 
 
</div>

Ich möchte den Hintergrund .beschreibung ändern, wenn die .gallery: Feuer schweben

+3

So die '.gallery verwenden: .description' Wähler schweben. – Xufox

+0

@Xufox nur mit HTML beginnen Danke für die offensichtliche Lösung ^^ können Sie es als Antwort posten. –

Antwort

3

Hallo gerade brauchen um diesen Stil hinzuzufügen:

.gallery:hover .description { 
    background-color:red; 
} 

.gallery { 
 
    margin: 5px; 
 
    border: 4px solid rgb(249, 255, 249); 
 
    float: left; 
 
    width: 320px; 
 
} 
 

 
.gallery:hover { 
 
    border: 4px solid rgb(190, 231, 255); 
 
} 
 

 
.gallery:hover .description { 
 
    background-color:red; 
 
} 
 

 
.gallery img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.description { 
 
    padding: 15px; 
 
    text-align: center; 
 
}
<div class="gallery"> 
 
    <a target="_blank" href="#"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/TiddlyMap_Demo_Site_-_0.6.4_-_Snapshot_2.png" alt="testImage" width="600" height="400" /> 
 
    </a> 
 
    <div class="description">Description for the image</div> 
 
</div>

Verwandte Themen