将鼠标悬停在同一 div 中的背景图像上时更改文本颜色答案

【问题标题】：Change text color when hover over background image in same div将鼠标悬停在同一 div 中的背景图像上时更改文本颜色
【发布时间】：2014-05-17 15:54:01
【问题描述】：

在div 标记中，我有一个背景图像，在其下方还有一个文本链接。背景图片和文字链接被包裹在同一个<a>标签中。

现在我要做的是在鼠标悬停在背景图像或文本链接上时更改文本链接的颜色。

到目前为止，我所做的只是在将鼠标悬停在文本上时仅更改文本颜色，但在将鼠标悬停在图像上时无法更改。

我应该在哪里应用悬停属性？尝试了数百种变化，但仍然无法做到。

这是测试演示：

http://jsfiddle.net/Bradg/65UHg/

还有代码，抱歉有点长。

EDIT更新了CSS代码并删除了一些与问题无关的行

CSS：

.make_cat_img_thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.428571429;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 7px;
  -webkit-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
          text-decoration:none;
 }

.text-center {
  text-align: center;
}

.text-muted {
  color: #999;
}

.text-muted:hover {
  color: orange;
}

.c-cover-image { 
    width:120px; 
    height:120px; 
    background-size:100% 100%; 
    margin:auto; 
    background-repeat:no-repeat; 
    background-position:center center;
}

HTML：

<div class="make_catalogue" style="padding-top:10px;">

    <div class="col-sm-3 col-xs-4 c-mobile c-mbottom">
        <a href="google.com" class="make_cat_img_thumbnail">
            <div style="background-image:url(../images/ctg/10085_1.jpg)" class="c-cover-image">
            </div>
            <br>
            <p class="text-center text-muted">Some Text</p>
        </a>
    </div>

</div>

非常感谢！！！

【问题讨论】：

您的问题有点难以理解。您需要通过确切的 id 或类名指定 the text color when hover over the text。
当我将鼠标悬停在“Some Text”标签上方的背景图像上时，我需要指定文本颜色。
您需要不涉及 javascript 的纯 css 解决方案？
最好的解决方案是 CSS，为了保持简单，但如果无法通过 CSS 实现，则会寻找其他解决方案。你有什么简单的想法吗？

标签： html css hover

【解决方案1】：

由于图像在背景中，因此您无法将其用于悬停。而是使用这个：

.make_catalogue:hover a, .make_catalogue:hover a p {
color:orange;
text-decoration:underline;
}

【讨论】：

不幸的是，这只改变了文本下方线条的颜色。
这是因为您的链接中有 p 标签。我在上面编辑了我的代码 + jsfiddle.net/7FU49
是的！这是我需要的答案。从来没有想过这一切都是因为p标签。只需要进行一项更改 - 因为如果将样式应用于make_catalogue，将有不止一个带有图像和文本的框，所有框的文本在悬停时都会变成橙色。所以我将您的解决方案应用于c-mbottom，现在每个框中的文本都单独更改。我正在选择您的答案作为正确答案，如果您有时间，您可能想将make_catalogue 更改为c-mbottom。再次感谢！！！

【解决方案2】：

尝试改变这个：

.make_catalogue a img:hover {
   color:orange;
   font-color:orange;
   text-decoration:underline;
}

对此：

.make_catalogue a:hover
 {
  color:orange;
  text-decoration:underline;
}

顺便说一句，font-color 不是一个有效的 CSS 属性，文本的颜色由color 属性定义。

【讨论】：

这是使文本变为橙色的不幸尝试之一。用您的代码更改它也不起作用:(

【解决方案3】：

试试这个：

.c-cover-image:hover .text-muted{
    color: #00f;
}

【讨论】：

您也可以尝试使用color: #00f !important添加优先级。

【解决方案4】：

.make_cat_img_thumbnail:hover p {
color:orange;
}

小提琴：http://jsfiddle.net/65UHg/6/

【讨论】：