jquery - css改变内部div的背景颜色

Question

我有一个 anchor 标记，在里面 <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;
}

将鼠标悬停在 anchor 标记上时，我想将蓝色更改为黄色，并将字体颜色更改为深蓝色

Answer 1

您可以通过执行类似的操作来实现此目的:

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

JSFiddle

您可以使用:hover在CSS中的一个元素上，这意味着当你的鼠标悬停在该元素上时，它会发生变化。

要让里面的东西移动，你只需要做 .firstElement:hover .childelement这样，当您将鼠标悬停在 .firstElement 上时，更改为childelement将被制作。

<小时/>

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

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