Question

在这种情况下，我有一些从WordPress生成的投资组合元素。我想在每个元素的底部显示标题，但在其下方有一些重叠（溢出：可见）和隐藏的描述。

如果我将鼠标悬停在元素上，则标题和隐藏的描述将可见并在元素内向上滑动。

我要战斗的地方是隐藏的描述，该描述只在元素内可见。在我的“解决方案”中，添加标题的克隆并将其隐藏在悬停时。但这并不顺利。您将如何实现这种行为？

$(".element").append(
  $(".title")
  .clone()
  .removeClass("title")
  .addClass("title-inject")
);

body {
  background-color: black;
}

a {
  font-family: Georgia;
  font-size: 20pt;
  text-decoration: none;
  color: white;
  font-style: italic;
  font-weight: bold;
  padding-left: 15px;
  display: block;
  background-color: none;
}

.element {
  overflow: visible;
  display: inline-block;
  position: relative;
}

.inner {
  height: 150px;
  width: 300px;
  position: relative;
  background-color: green;
  overflow: hidden;
}

.image {
  display: block;
  width: 100%;
  height: 100%;
  background: repeating-radial-gradient( circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
}

.element:hover .post-text {
  transform: translateY(-100%);
  transition: all 700ms ease-out;
}

.element:hover .title-inject {
  transition: all 0.1s ease;
  visibility: hidden;
  opacity: 0;
}

.title {
  margin-bottom: -6px;
}

.title-inject {
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
}

.text {
  font-family: arial;
  color: lightgrey;
  background-color: #0009;
  padding: 13px;
  border-radius: 15px 15px 0px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element">
  <div class="inner">
    <div class="image"></div>

    <div class="post-text">
      <div class="title">
        <a href="">title237</a>
      </div>
      <div class="text">
        is simply dummy text of the printing and typesetting
      </div>
    </div>
  </div>

Answer 1

您可以更改逻辑并在文本上应用高度动画，这样就可以保持溢出可见：

body {
  background-color: black;
}

a {
  font-family: Georgia;
  font-size: 20pt;
  text-decoration: none;
  color: white;
  font-style: italic;
  font-weight: bold;
  padding-left: 15px;
  display: block;
  background-color: none;
}

.inner {
  height: 150px;
  width: 300px;
  position: relative;
  background: repeating-radial-gradient( circle, purple, purple 10px, #4b026f 10px, #4b026f 20px);
  background-color: green;
  display: inline-block;
}

.post-text {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
}

.title {
  margin-bottom: -6px;
}

.text {
  font-family: arial;
  color: lightgrey;
  background-color: #0009;
  border-radius: 15px 15px 0px 0px;
  max-height:0;
  overflow:hidden;
  transition:max-height 700ms ease-out;
}
.text p {
 padding:13px;
 margin:0;
}
.inner:hover .text {
  max-height:100px;
}

<div class="inner">
  <div class="post-text">
    <div class="title">
      <a href="">title237</a>
    </div>
    <div class="text">
      <p>is simply dummy text of the printing and typesetting</p>
    </div>
  </div>
</div>

向上滑动并同时可见和隐藏溢出

1 个答案: