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

How to highlight an image after selection using css or jquery?

本文关键字：jquery 显示 图像 显示图 css 选择      更新时间：2023-09-26

我在一个页面中有多个可供用户选择的图像。用户可以选择任何图像，只需点击该图像。

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

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

特别是，我如何使用css或jquery突出选中的图像?

试试这个:

css:使用框阴影来弹出选中的图像

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
});

小提琴

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

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


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

不知道你是否喜欢这样，但我建议这样使用zoom:

css

img {
    border: solid 1px red;
    margin-right:5px;
}
.imgActive{
    zoom: 1.1;
}

js 

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

小提琴

(因为它被标记为jQuery，我将回答一个jQuery的例子)

脚本:

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

请注意选择器过于宽泛，这意味着_ALL_IMAGES_ANYWHERE_。如果你只想要#gallery

内的图像，你可以很容易地将其限定为$('#gallery img')css:

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

试试这个:在点击的图像上放置绿色边框。(假设-默认边框为红色)

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

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

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

这是一个jQuery解决方案

JSFiddle http://jsfiddle.net/jVEc7/

<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类点击元素

相关文章：