Question

我一直在尝试为我的div添加一些嵌套的跨度，但是它们会让包含它们的div脱臼。

正如您所看到的，如果您将鼠标悬停在其中一个白色div上，则会出现一个子div并使其父项脱位。我似乎无法找到原因。

$(document).ready(function() {
  $(".port-list").on("mouseenter", ".port-thumbnail", function() {
    $(this).find(".port-title").slideToggle();
  })

  $(".port-list").on("mouseleave", ".port-thumbnail", function() {
    $(this).find(".port-title").slideToggle();
  })
})

.portfolio {
  height: 800px;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../static/images/portfolio-background.jpg");
  background-attachment: fixed;
  background-size: cover;
}
.portfolio-title {
  top: 100px;
}
.port {
  position: relative;
  top: 100px;
  display: inline-block;
}
.port-thumbnail {
  height: 150px;
  width: 200px;
  margin: 30px;
  background: #fff;
}
.port-list {
  list-style-type: none;
  display: inline;
  padding: 0px;
}
.port-area {
  width: 800px;
}
.port-title {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  bottom: -130px;
  position: relative;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="portfolio container-fluid" id="portfolio">
  <center>
    <div class="intro-title portfolio-title">
      <strong>My Portfolio.</strong>
    </div>
    <div class="port-area">
      <ul class="port-list">
        <li class="port">
          <div class="port-thumbnail">
            <div class="port-title">wow</div>
          </div>
        </li>
        <li class="port">
          <div class="port-thumbnail">
            <div class="port-title">wow</div>
          </div>
        </li>
        <li class="port">
          <div class="port-thumbnail">
            <div class="port-title">wow</div>
          </div>
        </li>
        <li class="port">
          <div class="port-thumbnail">
            <div class="port-title">wow</div>
          </div>
        </li>
        <li class="port">
          <div class="port-thumbnail">
            <div class="port-title">wow</div>
          </div>
        </li>
        <li class="port">
          <div class="port-thumbnail">
            <div class="port-title">wow</div>
          </div>
        </li>
      </ul>
    </div>
  </center>
</div>

Answer 1

尝试：

.portfolio {
    height: 800px;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("../static/images/portfolio-background.jpg");
    background-attachment: fixed;
    background-size: cover;
}

.portfolio-title {
    top: 100px;
}
.port {
    position: relative;
    top: 100px;
    display: inline-block;
}
.port-thumbnail {
    position:relative;
    height: 150px;
    width: 200px;
    margin: 30px;
    background: #fff;   
}

.port-list {
    list-style-type: none;
    display: inline;
    padding: 0px;
}

.port-area {
    width: 800px;
}

.port-title {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    bottom: 0;
    position: relative;
    display: none;
    position:absolute;
}

jsfiddle：http://jsfiddle.net/4gL9mxjL/2/

Answer 2

你想这样吗？ fiddle

            .portfolio {
                height: 800px;
                background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("../static/images/portfolio-background.jpg");
                background-attachment: fixed;
                background-size: cover;
            }

            .portfolio-title {
                top: 100px;
            }
            .port {
                    position: relative;
                top: 100px;
                /* display: inline-block; */
                /* position: absolute; */
                    float: left;
            }
            .port-thumbnail {
                    height: 150px;
                width: 200px;
                margin: 30px;
                background: #fff;
                /* position: relative; */
            }

            .port-list {
                    list-style-type: none;
                /* display: inline; */
                padding: 0px;
            }

            .port-area {
                width: 800px;
            }

            .port-title {
                background: rgba(0, 0, 0, 0.5);
                color: white;
                bottom: -130px;
                position: relative;
                display: none;
            }

Answer 3

你可以一起消除所有的javascript，并通过更多的控制获得更平滑的效果。

.portfolio {
    height: 800px;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("../static/images/portfolio-background.jpg");
    background-attachment: fixed;
    background-size: cover;
}

.portfolio-title {
    top: 100px;
}
.port {
    position: relative;
    top: 100px;
    display: inline-block;
}
.port-thumbnail {
    height: 150px;
    width: 200px;
    margin: 30px;
    background: #fff;   
    position: relative;
    overflow: hidden;
}

.port-list {
    list-style-type: none;
    display: inline;
    padding: 0px;
}

.port-area {
    width: 800px;
}

.port-title {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    bottom: -40px;
    position: absolute;
    display: block;
    opacity: 0;
    width: 100%;
    -webkit-transition: bottom 0.5s ease-in-out, opacity 1s linear;
    -moz-transition: bottom 0.5s ease-in-out, opacity 1s linear;
    -o-transition: bottom 0.5s ease-in-out, opacity 1s linear;
    -ms-transition: bottom 0.5s ease-in-out, opacity 1s linear;
    transition: bottom 0.5s ease-in-out, opacity 1s linear;
    padding: 6px;
    box-sizing: border-box;
}

.port-thumbnail:hover .port-title {
    opacity: 1;
    bottom: 10px;
}

jsfiddle

嵌套的div会使父div发生错位

3 个答案: