使用 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

根据您的代码，不需要锚标记等，这是您可以使用的 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
    });
});

为了观看一个有效的演示，我为你创建了这个小提琴。

http://jsfiddle.net/2ZgjR/

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

如果您希望边框停留在您单击的项目上，我还添加了一个“活动”样式。只需将一些 CSS 添加到样式 .active { }

希望对你有帮助

Answer 2

是的，我会在悬停时使用 CSS 作为边框。您可能必须使用box-sizing: border-box 来确保事情不会乱七八糟。

首先，您的主图像应该是这样的：

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

由于您使用的是 jQuery，因此很容易在点击时切换主图像的来源。像这样的：

$('.bottom-pic').on('click', function(){
    var imgSrc = $(this).attr('src');
    $('#main-photo').attr('src', imgSrc);
});

这只是我的想法。我没有测试过。