访问元素的背景属性

-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

访问元素的背景属性

回答

相关问题