Question

我目前有一个相当长的图像列表，我希望在鼠标悬停时应用悬停效果，我的问题是如何将这缩短为一个简单的段落：

/* ==========================================================================
   Images
   ========================================================================== */

/*
 * Add hover affect to structure page images..
 */
#st1 {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

#st1:hover {
    opacity: 0.5;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}
#st2 {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

#st2:hover {
    opacity: 0.5;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

Answer 1

不是使用特定于每个图片的ID（即#st1 .. #stx）而是使用类似.hover-effect的类，并将class='hover-effect'添加到应受影响的所有元素通过你的悬停。然后，您的CSS可能如下所示：

.hover-effect {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.hover-effect:hover {
    opacity: 0.5;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

Answer 2

对于所有图像使用相同的类：

<img src="file1" class="classname"/>
<img src="file2" class="classname"/>
<img src="file3" class="classname"/>

<强> CSS ：

.classname{
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.classname:hover {
    opacity: 0.5;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

Answer 3

尝试这样的事情：

#st1,#st2 {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

#st1:hover,#st2:hover {
    opacity: 0.5;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

如果你可以为图像标签分配一个类，那么你可以在css规则中使用class而不是使用id。

Answer 4

您可以使用：

#st1,#st2{
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
#st1:hover,#st2:hover{
    opacity: 0.5;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

或（如果可能的话，为元素添加类名）：

.st{  
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
.st:hover{    
    opacity: 0.5;
    filter: alpha(opacity=75); /* For IE8 and earlier */
}

注意：由于最好尽量减少HTML元素中“id”的使用，因此最推荐使用第二种方法。

如何缩短这个CSS代码？

4 个答案: