показать div снизу - PullRequest
Новая
       7

показать div снизу

0 голосов
/ 05 июня 2018

Я пытаюсь обновить свое портфолио до начальной загрузки 4. Вот мой случай:

Я хочу отобразить div снизу вверх при наведении курсора на img.Смотрите мое изображение, чтобы понять, пожалуйста. Hover display

Какой метод я могу использовать, чтобы сделать это правильно?

Я использую этот код, но 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>

1 Ответ

0 голосов
/ 05 июня 2018

Взгляните на следующий фрагмент.Вы можете расположить различные элементы внутри меню, чтобы иметь разные правила, когда элемент меню находится в режиме наведения (с использованием чистого CSS).

Разумеется, вам придется поиграть со стилем - это простоPOC о том, как вы можете сделать это с помощью CSS.

Объяснение: Расположите пункты меню внизу, а внутри каждого элемента разместите контент, который вы хотите показывать при наведении курсора.Затем задайте правило :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>
...