html标记

Question

我有以下代码在所有图像周围创建边框以及悬停效果，但如何在所选图像上禁用此功能（即社交按钮或徽标）

img {
    padding: 5px;
    border: solid 1px #EFEFEF;
}
a:hover img {
    border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

Answer 1

你可以在图像上添加一个你想要/不想拥有边框的类，然后通过在css中使用它们的类来改变它们的样式。

Answer 2

使用css not selector

像这样

html标记

<div>
<img src="http://images03.olx.in/ui/3/20/99/45761199_1.jpg" alt="not found"/>
    <img src="http://i1-news.softpedia-static.com/images/news2/Facebook-Changes-Font-Size-Users-Grab-Their-Pitchforks-2.jpg" alt="not found" class="noborder"/>
</div>

的CSS

img:not(.noborder) {
    border: 2px solid red;
}

请参阅 Documentation and use 此处

Demo Fiddle

Answer 3

您应该在css中写入图像的完整路径，例如

 div.hover-img ul li p a:hover img {
     border: solid 1px #CCC;
     -moz-box-shadow: 1px 1px 5px #999;
     -webkit-box-shadow: 1px 1px 5px #999;
         box-shadow: 1px 1px 5px #999; }

此附加课程.hover-img和图片路径可帮助您仅识别悬停位置需要镶边的图像。

Answer 4

添加单独的课程

.noshadow{ border:none; box-shadow:none}

将此类添加到不需要框阴影和边框的元素

仅对选定图像禁用边框或悬停效果

4 个答案:

html标记

的CSS