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

时间：2017-05-30 21:31:27

标签： javascript jquery html css

我对此感到满意，除非将鼠标悬停在最右侧的图像上（必须单击显示图像才能看到图像）。整排略微向左跳。我注意到最后一行没有发生这种情况。任何指针都表示赞赏。

以下是展示此问题的codepen：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>

2 个答案:

答案 0 :(得分：3)

问题在于.images>span有display:inline（默认）。此外，您的定心技术基于内联跨度的高度，该高度取决于线高，并且可以很容易地断开，无需正确定心（例如，如果您更改图像的高度）。

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

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

您更新的代码段：

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>元素内的<span>在技术上是非法的。然而，这是一个如此广泛传播的错误，以至于未来很可能会出现这个规则。但是，就目前而言，如果您希望页面验证，则需要更改标记。

答案 1 :(得分：0)

该行的内容正在重新集中。如下所示更改CSS时，问题不会发生。

#images{
 display:none;
 z-index:100;
 bottom:0;
 text-align:left; /* instead of center */
}
相关问题
最新问题