CSS更改内部div的背景颜色

Question

我有一个锚标记，在那个<div>里面，我有3个<span>标记，在那个<a>标记的悬停上，如何更改<div>背景颜色和字体颜色？

这是我的： jsfiddle

下面是我的代码。

HTML：

<a href="#" class="col-xs-12 no-padding">
    <img src="../images/1.jpg" class="img-responsive width_100">
    <div class="imgContent">
        <span class="imgContentHeaderArticle">NEWS</span>
        <span class="imgContentHeaderComment">22 COMMENTS</span>
        <span class="imgContentMainFooter text-bold">Porous Innovation: Innovating within amorphous organization boundaries</span>
    </div>
</a>

CSS：

.imgContent{
  position: absolute;
  z-index: 2;
  top: 0px;
  background: rgba(10, 75, 221, 0.25) !important;
  width: 100%;
  height: 100%;
}
.imgContentHeaderArticle{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    color: #FFF;
    margin: 5px;
    border-bottom: 1px solid #FFF;
}
.imgContentHeaderComment
{
    position: absolute;
    top: 0;
    right: 0;
    font-size: 14px;
    color: #FFF;
    padding: 5px;
}
.imgContentMainFooter{
    position: absolute;
    bottom: 0;
    font-size: 30px;
    color: #FFF;
    padding: 5px;
}

在锚标签上悬停时，我想将蓝色更改为黄色，将字体颜色更改为深蓝色

Answer 1

您可以通过执行以下操作来实现：

.no-padding:hover span {
    color:yellow;
}

JSFiddle

您可以在CSS中的元素上使用:hover ，这意味着当鼠标悬停在该元素上时，它将改变。

要使其中的某些内容移动，您只需执行.firstElement:hover .childelement并在此时将鼠标悬停在.firstElement ，即可更改childelement 。

---

回复评论How do I change the background color of .imgContent?

.no-padding:hover .imgContent {
    background:red;
}

Answer 2

添加以下CSS注意：选择您喜欢的颜色

.no-padding:hover span {
    color: #00FF00; /*text Color to be changed*/
}

.no-padding:hover .imgContent {
    background-color:#CC00CC !important; /*Inner div background color*/
}