html - 从底部显示div

Question

我正在尝试将我的投资组合更新为 bootstrap 4。这是我的案例:

我想在悬停在 img 上时从下到上显示一个 div。请看我的照片以了解。

我可以使用哪种技术来正确地做到这一点？

我使用了这段代码，但 div 仍然隐藏着 'display:none' 的原因

请问以最佳方式做到这一点有什么想法吗？

     <style>
     #container {
     bottom: 0;
     display: none;
     position: fixed;
     width: 15%;
     }

     #inner {
     background-color: #F0F0F0 ;
     border: 1px solid #666666 ;
     border-bottom-width: 0px ;
     padding: 20px 20px 500px 20px ; 
     }
     </style>
     var container = $( "#container" );


        // Bind the link to toggle the slide.
        $( "a" ).hover(
            function( event ){
                // Prevent the default event.
                event.preventDefault();

                // Toggle the slide based on its current
                // visibility.
                if (container.is( ":visible" )){

                    // Hide - slide up.
                    container.slideUp( 2000 );

                } else {

                    // Show - slide down.
                    container.slideDown( 2000 );

                }
            }
        );
                     <p>
                              <a href="#">Show Div With SlideDown()</a>
                      </p>

                  <div id="container">
                  <div id="inner">

                      my picture project

                   </div>
                   </div>    

Answer 1

看看下面的片段。您可以在菜单中定位不同的元素，以便在菜单项悬停时有不同的规则(使用纯 CSS)。

当然，您必须尝试使用​​样式 - 这只是关于如何使用 CSS 进行设计的 POC。

说明:将菜单项放在底部，并在每个元素中放置悬停时要显示的内容。然后为菜单项提供 :hover 规则，并在该元素内选择要显示的内容元素(使用 display: block 或您喜欢的任何方法)。

.container {
  position: absolute;
  bottom: 0;
}

ul {
  list-style-type: none;
  margin: 0
}

ul:after {
  content: "";
  clear: both;
  display: block
}

li {
  float: left;
  padding: 10px;
}

li .content {
  display: none;
  position: absolute;
  bottom: 0;
  background-color: green;
}

li:hover .content {
  display: block;
}

<div class="container">
  <ul class="menu">
    <li>
      item1
      <div class="content">
           <h1>item1</h1>
      </div>
    </li>
    <li>
      item2
      <div class="content">
        <h1>item2</h1>
      </div>
    </li>
  </ul>
</div>