Question

我在页面中有多个图像可由用户选择。用户只需单击该图像即可选择任何图像。

一种解决方案是为该图像添加边框，但边框已应用于所有图像。

如何在选择后突出显示该图像？

特别是，如何使用css或jquery突出显示所选图像？

Answer 1

试试这个：

css：使用box-shadow弹出所选图像 -

img{border:solid 1px red; margin:10px;}
.selected{
   box-shadow:0px 12px 22px 1px #333;
}

jquery的：

$('img').click(function(){
   $('.selected').removeClass('selected'); // removes the previous selected class
   $(this).addClass('selected'); // adds the class to the clicked image
});

Fiddle

Answer 2

为选定的图像添加一个类，并使用css设置该类的样式：

$('img').click(function(){
     $(this).toggleClass('selectedIMG');
 });

然后在css：

img.selectedIMG{
    border: 2px solid blue;
}

Answer 3

（因为它用jQuery标记，我将用jQuery示例回答）

脚本：

$('img').click(function () {
    $(this).addClass('selected');
});

请注意选择器过于宽泛，这意味着_ALL_IMAGES_ANYWHERE_。如果您只想要$('#gallery img')

中的图片，则可以轻松地将其范围设为#gallery

的CSS：

img {
    border: 5px solid lime;
}

img.selected {
    border-color: red; /* will overwrite color, only */
}

Answer 4

Dunno，如果你喜欢这个，但我建议像这样使用zoom：

<强> CSS

img {
    border: solid 1px red;
    margin-right:5px;
}

.imgActive{
    zoom: 1.1;
}

<强> JS

$("img").on("click",
            function(){
                $(this).toggleClass("imgActive");
            });

fiddle

Answer 5

尝试此操作：在点击的图像上放置绿色边框。（假设 - 默认边框为红色）

$(function(){
    $('img').click(function(){
      $('img').removeClass('focused');
      $(this).addClass('focused');
    });
});

CSS：

img {border: 1px solid red;}// default border
.focused{border: 1px solid green;}

<强> Demo

Answer 6

我不知道在纯CSS中如何做到这一点。

这是一个jQuery解决方案

JSFiddle http://jsfiddle.net/jVEc7/

HTML

<img src="http://placekitten.com/200/300" alt="Photo 1"/>

<img src="http://placekitten.com/100/100" alt="Photo 2"/>

<img src="http://placekitten.com/280/280" alt="Photo 3"/>

<强> CSS

img{border: solid 1px red;}
.active_img{border: solid 2px blue;}

<强>的jQuery

$(function () {
    // Handler for .ready() called.
    $("img").on("click",function(){
        event.preventDefault();
        $(this).toggleClass("active_img");
    })
});

我想强制选择最多1个元素，您可以使用removeClass jQuery方法，然后将active_img类添加到单击的元素中。

如何使用css或jquery选择后突出显示图像？

6 个答案:

css：使用box-shadow弹出所选图像 -

jquery的：

Fiddle