如何编写 <ul> 图片库，其中悬停效果影响超过 1 个元素？

Question

我想编写一个图片库，如下所示： http://www.volkswagen.de/de.html 默认情况下，所有按钮都具有相同的大小。

当用户将鼠标悬停在按钮上时，它的大小会增加，同时所有其他按钮（除了用户悬停在按钮上的按钮的左侧和右侧的按钮）都会缩小。

我假设它是 CSS 和 Javascript 的混合体，但我无法弄清楚它是如何工作的，尤其是考虑到按钮如何根据鼠标悬停的内容左右移动.

有人可以帮我吗？

Answer 1

使用 jQuery 你可以这样做：

$(document).on('hover', 'img', function() {

   // make all images small except this
   $('img').not(this).removeClass('big').addClass('small');

   // make this one large
   $(this).addClass('big');

});

但是你应该研究你给出的例子，就像其他人建议的那样查看源代码

如何编写 <ul> 图片库，其中悬停效果影响超过 1 个元素？

How to program an <ul> image gallery, where the hover effect impacts more than 1 element?

html

javascript

css

image-gallery

hover