Question

我正在寻找类似于Mac App Dock的东西。基本上，我有一些div，它们彼此相邻，具有相同的类，以及一个唯一的ID（通过php完成）。

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

我想知道是否有一种基本上可以实现的方式，因此第2项具有转换的悬浮效果：scale（2.0），并且在将鼠标悬停在该元素上时，第1项和第1项item-3将获得transform：scale（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");
  });

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

1 个答案:

HTML

CSS

Javascript（jQuery）