Question

当我执行此代码时，图像会弹出，但是当您将鼠标悬停在任何状态时，宽度和高度都不对。是的.cover是风格而div是在体内。关于为什么这不起作用的任何帮助？

＆＃13;

.cover img {
  float: left;
  width: 303px;
  height: 352;
}

.cover img:hover {
  opacity: 45%;
  color: white
}

＆＃13;

<div class="cover">
  <img src="GhostRecon.png">
  <img src="tomb.jpg" width>
</div>

＆＃13;

Answer 1

有一些问题，一个是你没有为你的身高提供单位，你给你的图像宽度，但没有价值，但我为你修好了。

.cover img{
    float: left;
    width: 303px;
    height: 352px;
}

.cover img:hover {
    opacity: 45%;
    color: white
}

<div class="cover">
    <img src="GhostRecon.png">
    <img src="tomb.jpg">
</div>

Answer 2

所以你不能设置颜色＆＃39;图像的属性，这就是为什么它不起作用。＆＃39;不透明度＆＃39;没有工作，因为它没有%值，而是取1和0之间的值。

尝试：

opacity: .45;

这是你的代码：

.cover img{
  float: left;
  width: 303px;
  height: 352px; // add px here
}

.cover img:hover {
  opacity: .45; // use .45 instead of 45%
  color: white; // missing semicolon, but also this won't work on an image
}

<div class="cover">
    <img src="GhostRecon.png">
    <img src="tomb.jpg"> // I removed 'width' here
</div>

Answer 3

您似乎忘记了单位的高度和宽度（px）。我看到你也尝试在图像上使用color，但你可能应该使用过滤器。您可以按-webkit-filter和filter使用过滤器。您可以将图像更改为灰度，棕褐色，增加饱和度，对比度，亮度以及许多其他内容。我还注意到你为opacity设置了一个百分比值，但不透明度使用0到1之间的值，越低，越透明。相反，45％将是.45。

这里有一些修复但我不确定你想要哪个过滤器，所以我会把它留给你！

.cover img {
  float: left;
  width: 303px;
  height: 352px; //Don't forget px here
}

.cover img:hover {
  opacity: .45; //Changed from % to decimal
  //here's where you would put the filter
}
<div class="cover">
  <img src="GhostRecon.png">
  <img src="tomb.jpg"> //width not necessary here
</div>

为什么我的div课程不起作用？

3 个答案: