javascript - 使用 JavaScript 和 CSS 创建悬停和点击

Question

我的页面底部有 4 个缩略图，上面有一个主要的大图像。我希望能够单击缩略图并将其加载到大图像中。此外，我希望能够将鼠标悬停在缩略图上并在其周围出现黑色边框。

我有 40 个页面具有完全相同的设置(4 个缩略图，1 个主图像)但所有图像(产品)都不同。大拇指都在class="bottom-pic"中。

这看起来很简单，但也许我错了。我在想 CSS 用于悬停，JS 用于点击？我对 JS 很陌生。

这里是源代码:

<a href=""img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo" >

<img src="images-large/cobra-dark-wood.jpg" alt="" name="photo-bottom-one"  class="bottom-pic" id="photo-bottom-one">

<img src="images-large/cobra-dark-wood-one.jpg" alt="" id="photo-bottom-two"  class="bottom-pic">

<img src="images-large/cobra-black.jpg" alt="" id="photo-bottom-three"  class="bottom-pic">

<img src="images-large/cobra-black-one.jpg" alt="" name="photo-bottom-four"  class="bottom-pic" id="photo-bottom-four">

Answer 1

根据您的代码，不需要 anchor 标记等，这里是您可以使用的 JavaScript。

注意:此示例假定您使用的是 jQuery

$(document).ready(function() {    
    $('.bottom-pic').on('click', function(){
        $('.bottom-pic').removeClass("active"); //Removes class from all items
        $(this).addClass("active");  //Adds class only to the currently clicked on item
        $('#main-photo').attr('src', $(this).attr('src')); //Changes the source of the image tag
    });
});

为了查看工作演示，我为您创建了这个 fiddle 。

http://jsfiddle.net/2ZgjR/

请注意，图片不匹配，因为它们是从服务器动态加载的，但效果正是您所要求的，只需将此代码与您的图片一起使用即可!

如果您希望边框保留在您单击的元素上，我还添加了“事件”样式。只需将一些 CSS 添加到样式 .active { }

希望对你有帮助