基本 CSS：在 CSS 中对图像应用效果时，如何排除横幅图像？答案

【问题标题】：Basic CSS: When applying effects to images in CSS, how do you exclude the banner image?基本 CSS：在 CSS 中对图像应用效果时，如何排除横幅图像？
【发布时间】：2011-04-02 12:25:53
【问题描述】：

我有一些 CSS，当你将鼠标悬停在它们上面时，它会导致图像弹出一点：

a img 
{
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img 
{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

问题是这适用于所有图像，包括我的横幅。无论如何要排除横幅图片吗？

【问题讨论】：

谢谢大家，您的所有回答都很有帮助。我决定现在继续使用 :not()。

标签： html css web

【解决方案1】：

如果您可以使用类或 ID 引用该横幅图像，并且您可以拒绝 IE8 用户，那么 CSS3 选择器 :not() 可以创造奇迹。

A jsfiddle for you to look at.
An update to the above Fiddle that's a bit more complex.

除了IE8，every other major browser, and IE9，也支持这个。假设 this site 是正确的，Firefox 和 Safari 的支持可以追溯到版本 1。

【讨论】：

【解决方案2】：

使用类名引用所有悬停图像。这会将它们与没有类的图像分开。

例如：

<img class="hoverme" src=".." />
<img class="hoverme" src=".." />
<img src=".." />

.hoverme:hover{
  ..
}

只有具有 hoverme 类的图像才会生效。

【讨论】：

【解决方案3】：

当然可以，但它看起来不是很优雅。如果您的横幅有id，只需覆盖这些属性（希望我知道自己在做什么）：

a img#banner
{
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}

a:hover img#banner
{
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

【讨论】：