Наведите указатель мыши на div, чтобы открыть скрытый div - Держите активный прошлый родительский рост

Question

Я ищу, чтобы достичь чего-то простого, но повесив на нем. Вот черновик, что я ищу, чтобы сделать: http://codepen.io/anon/pen/LGZaPr

Мой Sass для родителей цв-4:

 .col-4 { 
      background: $primary-color; 
      color: $heading-two; 
      font-family: $secondary-font; 
      text-align: center; 
      height: 201px; 
      padding: rem-calc(32px 0); 
      overflow: visible; 
} 

более-инфо содержание до интро-контента:

.more-info { 
    @media #{$xlarge-breakpoint} { 
     width: calc-percent(70px, $site-width); 
    } 
    position:absolute; 
    width: calc-percent(123px, $site-width); 
    height: 201px; 
    background: $base-color; 
    overflow: hidden; 
    z-index: 9999; 
    visibility: hidden; 
    font-family: $primary-font; 
    padding: rem-calc(10px); 
    color: $primary-color; 
    text-align: left; 
    @include transition(bottom, 0.3s, ease-in-out); 
    line-height: 1.3; 
    @media #{$medium-breakpoint} { 
     width: 22.115%; 
    } 
    &:active { 
     display: block; 
    } 
    &:hover { 
     display: block; 
    } 
    a { 
     text-transform: uppercase; 
     font-family: $secondary-font; 
     text-decoration: none; 
     color: $primary-color; 
     &:hover { 
      color: $heading-two; 
     } 
    } 
    } // .more-info 

Мой Sass для висения выглядит следующим образом:

.intro-content { 
     //height: 100%; 
     &:hover + .more-info { 
      opacity: 1.0; 
      display: block; 
      visibility: visible; 
      position: relative; 
      z-index: 100000; 
     } 
    } 

Я хочу парить над .intro-контента, чтобы показать содержание я n .more-info. Я хотел бы иметь возможность держать div больше info, пока я не вытащу свой курсор из него, чтобы каждый мог щелкнуть по ссылке в поле/выделить любой текст.

Любая помощь приветствуется, спасибо!

Answer 1

Ну, вы можете использовать для этого javascript. Что-то вроде этого ..

Я отредактировал некоторые из ваших CSS. просто скопируйте и вставьте js-скрипт в свой код, и он должен начать работать. Также я отредактировал ваш CSS и дал вам компилирующую версию. Версию SCSS его можно найти here

EDIT

После изучения вашего сайта, я обнаружил, что ваш wrapper класс переполнение установлен как скрытое, который мешает вашему всплывающее окно отображались в полном объеме.

Единственное, что я могу найти, чтобы исправить это было его отключить. После его отключения вы можете увидеть всю ячейку more-info. (или установить его на вид)

.wrapper { 
margin: 0 auto; 
width: 940px; 
overflow: visible; 
} 

также, что это для вашего более-info наведение.

#services-menu .col-4 .more-info:hover { 
display: block; 
position: relative; /*NEW */ 
} 

Относительное положение будет препятствовать переполнению всплывающего окна.

Следующее, что ваш медиа-запрос.

вы установили его для ширины на основе порта представления веб-страницы. Это не должно быть так. Вы должны установить его на width: 100% из col-4, который затем может быть основан на окне просмотра. Таким образом, more-info popup всегда совпадает с шириной col-4.

так это сделать

#services-menu .col-4 .more-info { 
    display: none; 
position: absolute; 
width: 100%; /*instead of the 13.08511% you have as default. */ 
height: 201px; 
background: #ffffff; 
overflow: hidden; 
z-index: 999; 
-moz-transition: bottom, 0.3s, ease-in-out; 
-o-transition: bottom, 0.3s, ease-in-out; 
-webkit-transition: bottom, 0.3s, ease-in-out; 
transition: bottom, 0.3s, ease-in-out; 
line-height: 1.3; 
} 

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

@media only screen and (min-width: 1441px){ 
    #services-menu .col-4 .more-info { 
    width: 8.51064%; 
    } 
} 

Как только вы это сделаете. все будет работать нормально.

КОНЕЦ EDIT

---

$("div.intro-content").hover(
 
    function() { 
 
    $(this).find("div.more-info").stop().animate({ 
 
     opacity: 1 
 
    }, 500); 
 
    }, 
 
    function() { 
 
    $(this).find("div.more-info").stop().animate({ 
 
     opacity: 0 
 
    }, 200); 
 
    });

.wrapper { 
 
    margin: 0 auto; 
 
    width: 940px; 
 
    overflow: hidden; 
 
} 
 

 
#services-menu { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 272px; 
 
    background: blue; 
 
    margin-top: 83px; 
 
    z-index: 5; 
 
} 
 
#services-menu #services { 
 
    padding: 25px 0; 
 
} 
 
#services-menu .col-4 { 
 
    position: relative; 
 
    background: blue; 
 
    color: black; 
 
    text-align: center; 
 
    height: 201px; 
 
    padding: 32px 0; 
 
    overflow: visible; 
 
} 
 
#services-menu .col-4 .intro-content:hover + .more-info { 
 
    opacity: 1.0; 
 
    display: block; 
 
    visibility: visible; 
 
    z-index: 100000; 
 
} 
 
#services-menu .col-4 .more-info { 
 
    /* position:absolute; 
 
    width: 123px; 
 
    height: 201px; 
 
    background: white; 
 
    overflow: hidden; 
 
    z-index: 9999; 
 
    visibility: hidden; 
 
    padding: 10px; 
 
    text-align: left; 
 
    line-height: 1.3; 
 
      top: -27px; 
 
      left: 41%; */ 
 
    display: none; 
 
    position: absolute; 
 
    width: 123px; 
 
    height: 201px; 
 
    background: white; 
 
    overflow: hidden; 
 
    z-index: 999; 
 
    top: 130px; 
 
    left: 44%; 
 
} 
 
#services-menu .col-4 .more-info:active { 
 
    display: block; 
 
} 
 
#services-menu .col-4 .more-info:hover { 
 
    display: block; 
 
} 
 
#services-menu .col-4 .more-info a { 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    color: blue; 
 
} 
 
#services-menu .col-4 .more-info a:hover { 
 
    color: red; 
 
} 
 
#services-menu .col-4 img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    padding-bottom: 18px; 
 
} 
 
#services-menu .col-4 a { 
 
    color: blue; 
 
    text-decoration: none; 
 
} 
 
#services-menu .col-4 a span { 
 
    display: block; 
 
}

<section id="services-menu"> 
 
    <div class="wrapper"> 
 
    <div id="services"> 
 
     <div class="col-4"> 
 
     <div class="intro-content"> 
 
      <img src="http://placehold.it/156x96"> 
 
      <a href="#">Service Name</a> 
 
     </div> 
 
     <!-- /.intro-content --> 
 
     <div class="more-info"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eros quis odio porttitor rhoncus. Ut condim</p> 
 
      <p><a href="#">Start Here</a></p> 
 
     </div> 
 
     <!-- /.more-info --> 
 
     </div> 
 
     <!-- /.col-4 --> 
 
     <div class="col-4"> 
 
     <div class="intro-content"> 
 
      <img src="http://placehold.it/156x96"> 
 
      <a href="#">Service Name</a> 
 
     </div> 
 
     <!-- /.intro-content --> 
 
     <div class="more-info"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eros quis odio porttitor rhoncus. Ut condim</p> 
 
      <p><a href="#">Start Here</a></p> 
 
     </div> 
 
     <!-- /.more-info --> 
 
     </div> 
 
     <!-- /.col-4 --> 
 
     <div class="col-4"> 
 
     <div class="intro-content"> 
 
      <img src="http://placehold.it/156x96"> 
 
      <a href="#">Service Name</a> 
 
     </div> 
 
     <!-- /.intro-content --> 
 
     <div class="more-info"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eros quis odio porttitor rhoncus. Ut condim</p> 
 
      <p><a href="#">Start Here</a></p> 
 
     </div> 
 
     <!-- /.more-info --> 
 
     </div> 
 
     <!-- /.col-4 --> 
 
     <div class="col-4"> 
 
     <div class="intro-content"> 
 
      <img src="http://placehold.it/156x96"> 
 
      <a href="#">Service Name</a> 
 
     </div> 
 
     <!-- /.intro-content --> 
 
     <div class="more-info"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt eros quis odio porttitor rhoncus. Ut condim</p> 
 
      <p><a href="#">Start Here</a></p> 
 
     </div> 
 
     <!-- /.more-info --> 
 
     </div> 
 
     <!-- /.col-4 --> 
 
    </div> 
 
    <!-- /#services --> 
 
    </div> 
 
    <!-- /.wrapper --> 
 
</section> 
 
<!--/ #services-menu -->