从底部显示 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）。

当然，您必须尝试使用样式 - 这只是一个 POC，说明如何使用 CSS。

说明：将菜单项放在底部，并在每个项目中放置悬停时要显示的内容。然后为菜单项提供 :hover 规则，并在该元素内 select 要显示的内容元素（使用 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>

从底部显示 div

show div from bottom

html

css

display