Question

目前，当我将鼠标悬停在图像上方向上移动时，我希望它在向上移动时向下移动，因此图像的顶部与所有其他图像对齐。

CODE：

＆＃13;

$("ul.games li").hover(
  function() {
    $(this).addClass('active');
  },
  function() {
    $(this).removeClass('active');
  }
);

＆＃13;

body {
  background-color: #717e99;
}
section#banner .game-selector {
  position: absolute;
  top: 100px;
}
section#banner .game-selector ul li {
  display: inline-block;
  margin-right: -10px;
  padding: 0px;
  position: relative;
  width: 300px;
  height: 160px;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: background-position 0s ease;
}
section#banner .game-selector ul li.active {
  position: relative;
  z-index: 100;
  width: 300px;
  height: 175px;
  background-position: center bottom;
}
section#banner .game-selector ul li.minecraft {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.csgo {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.gmod {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.tf2 {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="banner">
  <div class="container">
    <div class="row">
      <div class="game-selector">
        <ul class="games">
          <li class="csgo"></li>
          <li class="minecraft"></li>
          <li class="gmod"></li>
        </ul>
      </div>
    </div>
  </div>
</section>

＆＃13;

JSFiddle

Answer 1

将top:5px添加到.active，将height:175px中的.active更改为160px，这是您的默认值。

我也改进了你的jQuery代码。

$("ul.games li").hover(function() {
  $('ul.games li').removeClass("active");
  $(this).addClass("active");
});

body {
  background-color: #717e99;
}
section#banner .game-selector {
  position: absolute;
  top: 100px;
}
section#banner .game-selector ul li {
  display: inline-block;
  margin-right: -10px;
  padding: 0px;
  position: relative;
  width: 300px;
  height: 160px;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: background-position 0s ease;
}
section#banner .game-selector ul li.active {
  position: relative;
  z-index: 100;
  width: 300px;
  height: 160px;
  background-position: center bottom;
  top: 5px
}
section#banner .game-selector ul li.minecraft {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.csgo {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.gmod {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}
section#banner .game-selector ul li.tf2 {
  background-image: url('http://i.imgur.com/UK5lBRh.png');
  background-position: center top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="banner">
  <div class="container">
    <div class="row">
      <div class="game-selector">
        <ul class="games">
          <li class="csgo"></li>
          <li class="minecraft"></li>
          <li class="gmod"></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 2

您可以简单地使用CSS悬停，而不是使用jQuery悬停。使用transform: translateY()轻松移动div而不会破坏其周围的其他内容。

section#banner .game-selector ul li:hover {
  transform: translateY(5px);
}

这是一个更新的小提琴： https://jsfiddle.net/4zh08gr5/3/

在悬停时使图像向下移动

2 个答案: