Question

如果你转到http://cascade2.hostei.com/collection.html

将鼠标悬停在枝形吊灯的照片上，您会注意到整个组从灰色变为蓝色。但如果将鼠标悬停在其下方的标题上，您会发现只有标题变为蓝色。

如何将其更改为当我将鼠标悬停在标题上时，它还会将图片的边框变为蓝色？最好是HTML或CSS。

忽略阴影和所有其他错误。 HTML：

<center>
<figure class=cheese>
<a class=cheese href="images/cascadelucecatalog.pdf">
   <center><img src="images/cataloguefront.jpg" width="400" height="398"  alt=""/>
</center><figcaption>
<h2><p>2013 Cascade Luce Catalog</p></h2></figcaption></a>
      </figure></center>

CSS：

.cheese {
    background-color: #4D4D4D;
    -webkit-box-shadow: 1px 1px 15px #999999;
    box-shadow: 1px 1px 15px #999999;
    color: #FFF;
}
.cheese p{
    color: #FFF;
}
.cheese:hover, .cheese:active, .cheese:focus, .cheese :hover, .cheese :active, .cheese :focus{
    text-decoration: none;
    background-color: #43A6CB;
}

Answer 1

当.cheese悬停时，你需要定位img。

.cheese:hover img {
background-color: #43A6CB;
}

Answer 2

从图像中取出填充物。它掩盖了背景。如果需要，将填充应用于父元素。

Answer 3

您正在将图像的背景颜色设置为白色

figure img {
padding: 10px;
background-color: #FFFFFF;
-webkit-box-shadow: 1px 1px 15px #999999;
box-shadow: 1px 1px 15px #999999;
}

只需删除 background-color：#FFFFFF; 属性，一切都应该正常。

在我看来，白色和灰色边框看起来相当好，看看图像的结束位置。

Answer 4

试试这个，在悬停时定位img

.cheese a img:hover {
    background: blue;
}

FIDDLE

如何在悬停时使整个组更改颜色？

4 个答案: