从底部显示div

Question

我正在尝试将我的投资组合更新为bootstrap 4.这是我的理由：

我想在img处悬停时从下到上显示一个div。请参阅我的图片了解。

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

我使用此代码，但div隐藏的原因是显示：无＆＃39;

请以最好的方式做到这一点吗？

     <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>