Question

我有一个锚标记，在<div>内部，并且我有3个<span>标记，在<a>标记的悬停上，如何更改{{1}背景颜色和字体颜色？

这是我的：jsfiddle

以下是我的代码。

HTML：

<div>

CSS：

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

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

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*/
}

css改变内部div的背景颜色

2 个答案: