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

Question

I'm looking to create something akin to the Mac App Dock. Basically, I have an number of divs all next to each other with the same class, and a unique ID (done through php).

Currently, when you hover over one element, it magnifies it using transform, however this doesn't affect the elements adjacent to them.

I'm wondering if there's a way to essentially make it so item-2 has a hover effect of transform:scale(2.0), and upon hovering over that element, item-1 & item-3 would get an effect of transform:scale(1.5);

Although, I imagine this is impossible in css. If so, is there a way I can achieve this effect in php or javascript somehow?

Answer 1

This is tricky since transform: scale doesn't seem to behave consistently across browsers.

I put together some CSS and Javascript to do what you described, although making it look good on all browsers would take much more time.

Try out my demo here: 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");
  });