Question

以下是一个非常简单的网页示例。它是一个投资组合网站 - 一个名称，然后链接到东西。将鼠标悬停在链接上时，下面会显示单行说明。问题是因为容器是垂直居中的，所以动态内容会重新集中所有内容 - 我该如何阻止它？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        html, body {
            height: 100%;
        }

        .container-middle {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #main-div {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container-middle">
        <div id="main-div">
            <h1>CLIENT NAME</h1>      
            <p>
                <a class="toggle-hover" data-id="proj1" href="http://google.com">Project 1</a> |
                <a class="toggle-hover" data-id="proj2" href="http://google.com">Something else</a> | 
                <a class="toggle-hover" data-id="proj3" href="http://google.com">Project 3</a> | 
                <a class="toggle-hover" data-id="proj4" href="http://google.com">LinkedIn</a>
            </p> 
            <div id="proj1" style="display: none;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis pretium ligula, quis eleifend odio pulvinar a.</p>
            </div>
            <div id="proj2" style="display: none;">
                <p>Cras orci nulla, ultrices eu magna et, suscipit vulputate diam.</p>
            </div>
            <div id="proj3" style="display: none;">
                <p>Curabitur aliquam ante et metus consectetur, nec interdum mi imperdiet. Donec auctor eros felis, et posuere est dictum in.</p>
            </div>
            <div id="proj4" style="display: none;">
                <p>Sed sed porta enim, ac consectetur dui. </p>
            </div>

        </div>
    </div>
</body>

<script>
    $(".toggle-hover").hover(function(){
        var divid = $(this).attr('data-id');
        $("#" + divid).slideToggle();
    });
</script>
</html>

Answer 1

问题在于，由于容器是垂直居中的，因此动态内容会重新集中所有内容 - 如何阻止它？

我已经在下面实施了一个解决方案来保存您的jQuery逻辑以定位您的字幕，但我没有使用slideToggle（jQuery动画），而是将其设置为切换一个CSS类，我们可以过渡。

然后我创建了一个名为.descriptions的容器来保存您的字幕，因此我们可以使用position: absolute设置它们的样式 - 它有两个好处：它让它们存在于同一个空间中，并且它可以防止它们从影响其他元素的布局和定位。

下面的工作演示：

＆＃13;

$(".toggle-hover").hover(function() {
  var divid = $(this).attr('data-id');
  $("#" + divid).toggleClass('show');
});

＆＃13;

html,
body {
  height: 100%;
}

.container-middle {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#main-div {
  text-align: center;
}

.descriptions {
  position: relative;
}

.descriptions div {
  opacity: 0;
  position: absolute;
  transition: 1s opacity, 1s transform;
  transform: translateY(-10px);
  width: 100%;
}

.descriptions div.show {
  opacity: 1;
  transform: none;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container-middle">
  <div id="main-div">
    <h1>CLIENT NAME</h1>
    <p>
      <a class="toggle-hover" data-id="proj1" href="http://google.com">Project 1</a> |
      <a class="toggle-hover" data-id="proj2" href="http://google.com">Something else</a> |
      <a class="toggle-hover" data-id="proj3" href="http://google.com">Project 3</a> |
      <a class="toggle-hover" data-id="proj4" href="http://google.com">LinkedIn</a>
    </p>
    <div class="descriptions">
      <div id="proj1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis pretium ligula, quis eleifend odio pulvinar a.</p>
      </div>
      <div id="proj2">
        <p>Cras orci nulla, ultrices eu magna et, suscipit vulputate diam.</p>
      </div>
      <div id="proj3">
        <p>Curabitur aliquam ante et metus consectetur, nec interdum mi imperdiet. Donec auctor eros felis, et posuere est dictum in.</p>
      </div>
      <div id="proj4">
        <p>Sed sed porta enim, ac consectetur dui. </p>
      </div>
    </div>
  </div>
</div>

＆＃13;

当动态内容出现在其下方时，防止垂直居中的DIV移动

1 个答案: