为什么我的div类不工作？

-2

当我执行此代码时，图像弹出，但是当您将鼠标悬停在任何事情上时，宽度和高度都不正确。是的.cover的风格和div在身体中。任何帮助为什么这不会工作？为什么我的div类不工作？

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

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

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

来源

2017-05-17 Sam

您需要提供一个单位的高度和宽度，在这种情况下，你的身高是缺少'px'，你也有一个'你的第二个图像width'属性，它没有做任何事情 –

试运行你的CSS通过CSS linter，如http://csslint.net/。 –

有一些问题，其中之一是，你没有给单位为你的身高，你给你的图像的宽度，但没有价值，但我固定它。

.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>

来源

2017-05-17 01:18:05

所以你不能设置图像的'颜色'属性，这就是为什么这是行不通的。 “不透明度”不起作用，因为它不包含%值，而是取值为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>

来源

2017-05-17 01:18:31

非常感谢！ – Sam

不用担心@Sam - 如果您对答案感到满意，如果您可以接受，我会很喜欢它，方法是单击我答案旁边的复选标记（靠近向上和向下按钮） –

你似乎已经忘了给单位的高度和宽度（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>

来源

2017-05-17 01:24:23

为什么我的div类不工作？

回答

相关问题