悬停项目之前的目标项目（类似netflix的悬停效果）

Question

我正在构建一个类似netflix的滑块，其中悬停的滑块项目会将其他滑块项目推到一边（取决于它们的位置）。 （参见示例代码）

我无法找到以下情况的解决方案：

当我将第3项悬停时，所有其他项目都会按照我的要求被左侧和右侧推到一边。

当第2项悬停时，我希望第1项（或.item-left左边的任何项目）不移动（保持原位）。所有其他人都按计划行事。

当第4项悬停时，我希望第3/2/1项与未悬停时保持4相同的距离。第5项表现正确。

悬停物品需要留在浅蓝色区域（显示）。

我该怎么做才能做到这一点？欢迎任何帮助。

谢谢！

＆＃13;

＆＃13;

var slider = document.getElementById('sli');
var prev = document.getElementById('prev');
prev.addEventListener('click', prevC, false);
var next = document.getElementById('next');
next.addEventListener('click', nextC, false);

function prevC() {
  alert('-1')
}

function nextC() {
  alert('+1');
}

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700,900);
* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  background-color: white/* rgba(20, 23, 26, .1) */
  ;
}

.page-head {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.page-head h1 {
  font-size: 2em;
  color: red;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
}


/* general stuff */

.row {
  display: block;
  width: 400px;
  margin: 0 auto;
  /* overflow-x:hidden; */
}

.row-header {}

.row-header h2 {
  font-size: 1.4em;
  font-weight: 500;
  padding: 8px 0;
  margin-left: 45px;
}

.row-container {
  position: relative;
}

.slider {
  width: 100%;
  padding: 0 41px 0 42px;
  margin-top: 45px;
}

.slider .handle {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 20;
  width: 44px;
  height: 69px;
  text-align: center;
  justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  background: rgba(20, 20, 20, .3);
  z-index: .9;
  cursor: pointer;
  line-height: 69px;
}

.handle-prev {
  left: 0;
}

.handle-next {
  right: 0;
}

.show-peek {
  display: inline-block;
  width: 316px;
  height: 69px;
  background: lightblue;
  overflow-x: visible;
  vertical-align: middle;
  border: 1px dotted grey;
}

.slider-content {
  display: block;
  margin-top: 34px;
  list-style: none;
  white-space: nowrap;
  transform: translateY(-50%) translateX(-100px);
  text-align: center;
}

.slider-content:hover .slider-item {
  opacity: 1;
  transform: translateX(-49px);
  transition-delay: .85s;
}

.slider-content:hover .slider-item:hover {
  opacity: 1;
}

.slider-item {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  list-style: none;
  width: 100px;
  height: 69px;
  /* background-color: black; */
  transition-duration: .3s;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(205, 20, 20, .3);
}

.slider-content li .bg-img {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center top;
}

.slider-content li:hover {
  transition-delay: 0.1s;
  width: 200px;
  height: 130px;
}

.slider-content .left-item:hover {
  transform: translateX(0);
  z-index: 999;
}

.slider-content .left-item:hover~.slider-item {
  transform: translate3d(0px, 0, 0);
}

.slider-content .right-item:hover {
  margin-left: -50px;
  z-index: 999;
}

.slider-content li:hover a .content {
  transform: translateY(0) translateX(-50%);
  transition-delay: 0.75s;
  opacity: 1;
}

.slider-content li a {
  color: white;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 2;
}

.slider-content li a .content {
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateY(100%) translateX(-50%);
  transition-duration: .75s;
  transition-delay: .4s;
  opacity: 0;
  padding: 40px 10px 10px 10px;
  width: 400px;
}

.slider-content li a .content h2 {
  font-weight: 300;
  color: white;
  font-size: 24px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<div class="row">
  <div class="row-header">
    <h2></h2>
  </div>
  <div class="row-container">
    <div class="slider">
      <span id="prev" class="handle handle-prev"><</span>
      <div class="show-peek">
        <ul class="slider-content">
          <li class="slider-item">1</li>
          <li class="slider-item left-item">2</li>
          <li class="slider-item">3

          </li>
          <li class="slider-item right-item">4</li>
          <li class="slider-item">5</li>
        </ul>
      </div>
      <!-- ends show-peek -->
      <span id="next" class="handle handle-next">></span>
    </div>
    <!-- ends slider -->
  </div>
  <!-- ends row-container -->
</div>
<!-- ends row -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

我确实说过，实际上并没有CSS唯一的解决方案，但似乎您可能会有点创意......

您可以利用-webkit-transform: scale CSS属性。

将您的ul和li视为：

<ul class="slider-content">
  <li id="1" class="slider-item">1</li>
  <li id="2" class="slider-item">2</li>
  <li id="3" class="slider-item">3</li>
  <li id="4" class="slider-item">4</li>
</ul>

我们可以添加一些CSS来修改他们的订单并修改他们的悬停

ul{
  list-style:none;
}

ul:hover li {
  -webkit-transform: translateX(-25%);
          transform: translateX(-25%);
}
ul:hover li:hover {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
  transition-duration: 0.1818181818s;
}
ul:hover li:hover ~ li {
  -webkit-transform: translateX(25%);
          transform: translateX(25%);
}

.slider-item {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  list-style: none;
  width: 100px;
  height: 69px;
  /* background-color: black; */
  transition-duration: .3s;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(205, 20, 20, .3);
}

.slider-content {
  display: block;
  margin-top: 34px;
  list-style: none;
  white-space: nowrap;
  transform: translateY(-50%) translateX(-100px);
  text-align: center;
}

<ul class="slider-content">
  <li id="1" class="slider-item">1</li>
  <li id="2" class="slider-item">2</li>
  <li id="3" class="slider-item">3</li>
  <li id="4" class="slider-item">4</li>
</ul>

这可以通过使用CSS中的animations和translate css的一些巧妙使用来实现。