Question

在div标签中我有一个背景图片，下面还有一个文字链接。背景图片和文本链接包含在相同的<a>标记中。

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

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

我应该应用悬停属性的任何想法？尝试了数百种变化但仍然无法做到。

以下是测试演示：

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

代码，对此有点遗憾。

编辑更新了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>

非常感谢!!!

Answer 1

由于图像在后台，因此您无法将其用于悬停。而是使用它：

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

Answer 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属性定义。

Answer 3

试试这个：

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

Answer 4

.make_cat_img_thumbnail:hover p {
color:orange;
}

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

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

4 个答案: