javascript - CSS - 使用悬停以不同方式影响多个元素

Question

我希望创建类似于 Mac App Dock 的东西。基本上，我有许多 div 彼此相邻，具有相同的类和一个唯一的 ID(通过 php 完成)。

目前，当您将鼠标悬停在一个元素上时，它会使用变换将其放大，但这不会影响与其相邻的元素。

我想知道是否有一种方法可以使 item-2 具有 transform:scale(2.0) 的悬停效果，并且在悬停在该元素上时，item-1 和 item-3 将获得效果变换:缩放(1.5)；

不过，我认为这在 css 中是不可能的。如果是这样，有什么办法可以在 php 或 javascript 中以某种方式实现这种效果吗？

Answer 1

这很棘手，因为 transform: scale 似乎在不同浏览器中表现不一致。

我将一些 CSS 和 Javascript 放在一起来完成您描述的操作，尽管要使其在所有浏览器上看起来都不错需要花费更多时间。

在这里试试我的演示:CodePen

HTML

<ul id="list">
  <li><a href="#">One</a></li>
  <li><a href="#">Two</a></li>
  <li><a href="#">Three</a></li>
  <li><a href="#">Four</a></li>
  <li><a href="#">Five</a></li>
  <li><a href="#">Six</a></li>
</ul>

CSS

#list li:hover {
  zoom: 2;
  -webkit-transform: scale(2);
  -moz-transform:    scale(2);
  -ms-transform:     scale(2);
  -o-transform:      scale(2);
  transform:         scale(2);
  position: relative;
  z-index: 999;
 }
.beside {
   zoom: 1.5;
  -webkit-transform: scale(1.5);
  -moz-transform:    scale(1.5);
  -ms-transform:     scale(1.5);
  -o-transform:      scale(1.5);
  transform:         scale(1.5);
 }

Javascript (jQuery)

  $('#list li').on("mouseenter", function() {
    $(this).prev().addClass("beside");
    $(this).next().addClass("beside");
  });
  $('#list li').on("mouseleave", function() {
    $(this).prev().removeClass("beside");
    $(this).next().removeClass("beside");
  });