1

如果你去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;
}
4

4 回答 4

4

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

.cheese:hover img {
background-color: #43A6CB;
}
于 2013-07-31T18:43:15.007 回答
1

去掉图像的填充。它模糊了背景。如果需要，将填充应用于父元素。

于 2013-07-31T18:44:14.140 回答
0

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

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

只需删除背景颜色：#FFFFFF; 财产和一切都应该正常工作。

在我看来，白色的灰色边框看起来要好得多，以查看图像的结束位置。

于 2013-07-31T18:44:29.167 回答
0

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

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

小提琴

于 2013-07-31T18:50:21.130 回答