Question

所以我正在研究公司服务箱，需要以下内容......

On hover:
1. Parent div scales up and gets box shadow without affecting the other service boxes around it (it should sort of pop up over top of the other service boxes)
2. A hidden child div comes into view as the parent is scaling up
3. The other service boxes shouldn't move or be affected
On hover out:
Reverse happens

我将它放在悬停时放大的位置，并显示带有文本的隐藏子div ...但它正在移动其他服务盒。有什么帮助吗？

以下是我目前所处位置的示例...... https://codepen.io/Finches/pen/jayePK

谢谢！

Answer 1

您可以将其添加到css中的可见类：

position : fixed;
bottom : -20px;
left : 0;

您需要进一步测试。

Answer 2

不使用display属性，而是使用visibility属性。这将使摘录不可见，但文档的流程在显示项目时不会更新。

.service-excerpt {
    visibility: hidden;
    color: #005CAB;
  font-size: 12px;
}
.visible {
  visibility: visible;
}

＆＃13;

$('.service-box').hover(function(){
    $(this).children('.service-excerpt').addClass('visible');
}, function(){
    $(this).children('.service-excerpt').removeClass('visible');
})

＆＃13;

a {
  text-decoration: none;
  text-align: center;
}

.service-link {
  width: 50%;
}

.service-box {
    width: 50%;
    display: inline-block;
    text-align: center;
    margin:0;
    padding:25px;
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
}

@media (min-width: 1000px) { 
    .service-box {
        width: 25%;
    }
  
  .service-link {
    width: 25%;
  }
}

.service-icon {
    width: 100px;
    margin: 0 auto;
}

.service-icon img {
  width: 100%;
}

.service-title {
    text-align: center;
    font-family: 'Muli', sans-serif;
    color: #37CC96;
}

.service-excerpt {
    visibility: hidden;
    color: #005CAB;
  font-size: 12px;
}

.service-box:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    box-shadow: 0px 0px 15px #ddd;
}

.visible {
  visibility: visible;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service-container">
  <a class="service-link" href="#">
    <div class="service-box">
      <div class="service-icon">
        <img src="http://via.placeholder.com/150x150" />
      </div>
      <div class="service-title">Service Title</div>
      <div class="service-excerpt">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at.</div>
    </div>
  </a>
  <a class="service-link" href="#">
    <div class="service-box">
      <div class="service-icon">
        <img src="http://via.placeholder.com/150x150" />
      </div>
      <div class="service-title">Service Title</div>
      <div class="service-excerpt">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College.</div>
    </div>
  </a>
  <a class="service-link" href="#">
    <div class="service-box">
      <div class="service-icon">
        <img src="http://via.placeholder.com/150x150" />
      </div>
      <div class="service-title">Service Title</div>
      <div class="service-excerpt">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</div>
    </div>
  </a>
  <a class="service-link" href="#">
    <div class="service-box">
      <div class="service-icon">
        <img src="http://via.placeholder.com/150x150" />
      </div>
      <div class="service-title">Service Title</div>
      <div class="service-excerpt">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor.</div>
    </div>
  </a>
  <a class="service-link" href="#">
    <div class="service-box">
      <div class="service-icon">
        <img src="http://via.placeholder.com/150x150" />
      </div>
      <div class="service-title">Service Title</div>
      <div class="service-excerpt">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor.</div>
    </div>
  </a>
  <a class="service-link" href="#">
    <div class="service-box">
      <div class="service-icon">
        <img src="http://via.placeholder.com/150x150" />
      </div>
      <div class="service-title">Service Title</div>
      <div class="service-excerpt">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock.</div>
    </div>
  </a>
</div>

＆＃13;

如何扩展父div并在悬停时显示隐藏的子div而不影响周围的div

2 个答案: