如何给当前显示的边框添加边框

Question

我正在使用 Shopify envy 主题。我有多个产品图片。我想给显示为主图像的拇指图像添加边框。总之当前图片应该有边框。

这是我想要的示例图像：

小图片是多个不同的缩略图。如果拇指图像显示在主大图像中，则拇指应该有边框。

这是我的jQuery:

$('a.image-swap').click(function() {
    var newImage = $(this).attr('href');
    $('.featured-image-div img').attr({ src: newImage });
    return false;
});

Answer 1

因此您正在使用 jQuery 来交换图像您可以添加 css class "active" 显示的缩略图：

你的JavaScript：

$('#your-element').hover(function() {
    // Your stuff for exchanging the image
    $(this).addClass('active');
});
$('#your-element').mouseleave(function() {
    $(this).removeClass('active');
});

你的CSS：

.thumb.active {
    border: 2px solid black;
}

Answer 2

根据您的代码试试这个：

$('a.image-swap').click(function() {
var newImage = $(this).attr('href');
$( '.featured-image-div img' ).attr({ src: newImage });
$('a.image-swap').removeClass('active');
$(this).addClass('active');
return false;

希望能奏效...:)

如何给当前显示的边框添加边框

How to give border to to current displaying border

html

css

shopify