訪問元素的背景屬性

-3

.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>

我想改變.DESCRIPTION的背景時，名爲.gallery：懸停火災

來源

2017-10-20 George Anastasov

所以使用'.gallery：hover .description'選擇器。 – Xufox

@Xufox剛剛從HTML開始感謝明顯的解決方案^^你可以發佈它作爲答案。 –

喜剛需添加此樣式：

.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>

來源

2017-10-20 20:19:01 Federico

訪問元素的背景屬性

回答

相關問題