如何防止最右边的元素在悬停时跳跃？

Question

我对此感到满意，除了将鼠标悬停在最右侧的图像上（必须单击显示图像才能查看图像）。整排稍微向左跳跃。我注意到这不会发生在最后一行。任何指针表示赞赏。

这是一个演示该问题的代码笔：https://codepen.io/anon/pen/OmeNRa?editors=0110

var showImages = $("#showImages");
var hideImages = $("#hideImages");
var images = $("#images");
var overlay = $("#overlay");
var docHeight = $(document).height();
var writtenContent = $("#writtenContent");
var counter = 0;
var messageBox = $("#messageBox");
var sendMessage = $("#sendMessage");

showImages.click(function() {
  counter++;
  $(this).html("Show Images");
  if (counter % 2 > 0) $(this).html("Hide Images");
  $("body").toggleClass("blackout", 300);
  images.slideToggle({
    direction: "up"
  }, 600);
  writtenContent.slideToggle({
    direction: "up"
  }, 600);
});

sendMessage.click(function() {
  messageBox.slideToggle({
    direction: "up"
  }, 500);
});

$(document).on("mouseenter", "span img", function() {
  $(this).addClass("fade").siblings().show();
});
$(document).on("mouseleave", "span img", function() {
  $(this).removeClass("fade").siblings().hide();
});

.nav {
  height: 8vh;
  background: linear-gradient(-45deg, purple, purple, indigo);
  color: white;
  font-family: helvetica;
  font-size: 20px;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 999;
}

#topNav {
  top: 0vh;
}

#bottomNav {
  bottom: -8.1vh;
  transform: translateY(-100%);
}

#content {
  padding-top: 8vh;
  padding-bottom: 8vh;
  margin: 0 auto;
}

#images {
  display: none;
  z-index: 100;
  bottom: 0;
  text-align: center;
}

#images span {
  position: relative;
  text-align: center;
}

#images span img {
  height: 100px;
  width: 100px;
}

.blackout {
  background-color: black;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.name {
  display: none;
  color: white;
  left: 0;
  position: absolute;
  bottom: 200%;
  width: 100%;
  font-weight: bold;
  pointer-events: none;
}

.fade {
  opacity: .2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="topNav">
</div>
<div id="content">
  <div id="writtenContent">
    <p>This page's written content starts here..</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>END of page's written content.</p>
  </div>

  <div id="images">
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image LONG LONG LONG Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image LONG LONG Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image LONG Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
  </div>

</div>

<div class="nav" id="bottomNav">
  <button id="showImages">Show Images</button>
</div>

Answer 1

问题在于你的.images>span 有display:inline（默认）。此外，您的居中技术基于内联跨度的高度，这取决于行高并且很容易中断，更不用说正确的居中（例如，如果您更改图像的高度）。

要解决您的问题，我会这样做：

#images span {
  display: inline-block;
}
.name {
  bottom: 50%;
  text-align: center;
  transform: translateY(50%)
}

您更新的 sn-p：

var showImages = $("#showImages");
var hideImages = $("#hideImages");
var images = $("#images");
var overlay = $("#overlay");
var docHeight = $(document).height();
var writtenContent = $("#writtenContent");
var counter = 0;
var messageBox = $("#messageBox");
var sendMessage = $("#sendMessage");

showImages.click(function() {
  counter++;
  $(this).html("Show Images");
  if (counter % 2 > 0) $(this).html("Hide Images");
  $("body").toggleClass("blackout", 300);
  images.slideToggle({
    direction: "up"
  }, 600);
  writtenContent.slideToggle({
    direction: "up"
  }, 600);
});

sendMessage.click(function() {
  messageBox.slideToggle({
    direction: "up"
  }, 500);
});

$(document).on("mouseenter", "span img", function() {
  $(this).addClass("fade").siblings().show();
});
$(document).on("mouseleave", "span img", function() {
  $(this).removeClass("fade").siblings().hide();
});

.nav {
  height: 8vh;
  background: linear-gradient(-45deg, purple, purple, indigo);
  color: white;
  font-family: helvetica;
  font-size: 20px;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 999;
}

#topNav {
  top: 0vh;
}

#bottomNav {
  bottom: -8.1vh;
  transform: translateY(-100%);
}

#content {
  padding-top: 8vh;
  padding-bottom: 8vh;
  margin: 0 auto;
}

#images {
  display: none;
  z-index: 100;
  bottom: 0;
  text-align: center;
}

#images span {
  position: relative;
  text-align: center;
   display: inline-block;
}

#images span img {
  height: 100px;
  width: 100px;
}

.blackout {
  background-color: black;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.name {
  display: none;
  color: white;
  left: 0;
  position: absolute;
  bottom: 50%;
  width: 100%;
  font-weight: bold;
  pointer-events: none;
  text-align: center;
  transform: translateY(50%)
}

.fade {
  opacity: .2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav" id="topNav">
</div>
<div id="content">
  <div id="writtenContent">
    <p>This page's written content starts here..</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>Page written content goes here.</p>
    <p>END of page's written content.</p>
  </div>

  <div id="images">
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image LONG LONG LONG Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image LONG LONG Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image LONG Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
    <span>
          <img src="https://pp.walk.sc/map_tiles/walkscore/v3/17/4512/6478/14.png">
          <div class='name'>Image Title</div>
        </span>
  </div>

</div>

<div class="nav" id="bottomNav">
  <button id="showImages">Show Images</button>
</div>

还要注意 <div>s 内的 <span> 元素在技术上是非法的。然而，这是一个如此广泛传播的错误，以至于这条规则将来很可能会被改变。但是，目前，如果您希望您的页面通过验证，您需要更改您的标记。

Answer 2

该行的内容正在重新居中。当您按以下方式更改 CSS 时，问题不会发生。

#images{
 display:none;
 z-index:100;
 bottom:0;
 text-align:left; /* instead of center */
}