悬停不透明度 CSS 最小图像尺寸答案

【问题标题】：Hover opacity CSS Minimum image size悬停不透明度 CSS 最小图像尺寸
【发布时间】：2014-01-11 02:10:37
【问题描述】：

我正在使用以下 CSS 为图像创建悬停不透明度。我希望能够设置一个最低限度，这样只有一定尺寸的图像才会具有不透明度。

例如。我的 225x225 图像正确呈现不透明度，但我的大标题图像也是如此。我只希望 225x225 及以下的图像在悬停时呈现不透明度，而不是全部。

img {
opacity: 1;
filter: alpha(opacity=40);
/* For IE8 and earlier */
}

 img:hover {
opacity: .8;
filter: alpha(opacity=100);
 /* For IE8 and earlier */
}

感谢您的帮助！

【问题讨论】：

为此使用一个类，而不是像img这样的基本选择器。
@Paulie_D 他需要将每个新图像标记为小于 225x225。此外，当您使用动态内容时，它永远不会起作用。
我看不到您的 HTML，所以我只是在猜测，但是您有没有办法将您的 225x225 图像与其他图像区分开来？标题是在不同的容器内还是什么？ :nth-child 可以选择吗？

标签： css hover opacity

【解决方案1】：

正如艾伦达在回答中指出的那样；为此使用 JavaScript，但是如果 JavaScript 不是一个选项，那么您必须创建一个类并将该 CSS 类添加到您希望在悬停时具有不透明度效果的每个元素。

【讨论】：

正如我对 Paulie_D 的评论所评论的那样；如果 OP 使用可以切换图像大小的动态代码，则绑定类不够可靠。您只能通过在提供图片之前使用服务器端脚本分析图片的尺寸来实现。

【解决方案2】：

您不能对单个元素使用媒体查询，因此您只能在此处使用 JavaScript。为此正在制定新的 CSS 规则，但目前使用它们并不可靠。

您可以做的是使用 jQuery 添加一个侦听器 img 标签并在页面加载时查看 CSS。如果图像的大小不符合您对不透明度级别的要求，您可以设置上限。

【讨论】：