Подсказка Div не отображается при наведении

Question

Подсказка Div не отображается при наведении

0

Я использовал belwo код для показа деталей при наведении курсора, но div движется влево, но bioinfo не отображается, поэтому можете ли вы, пожалуйста, направить? как реализовать это в jquery.

в html файле

  <ul class="ch-grid">
    <li>
    <div class="ch-item ch-img-1">
     <div class="ch-info">  </div>
    </div>

     <div class="bioinfo">
        <h2>Details of the image initially it should hide</h2>
     </div>
    </li>
    </ul>

в файле css

css файл

.ch-grid li .person-profile nav ul li {
    display: inline-block !important;
    height: 56px !important;
    margin: 0px !important;
    width: 36px !important;
}


.ch-img-1 { 
    background-image: url(../images/image.png);
}


.bioinfo {
    display: none;
    background: rgba(246,246,246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}

В JQuery

$('.ch-grid > li').hover(function() {
                $(this).animate({ marginRight: 120 });
                $(this).children('.bioinfo').show();
    }, function() {
            $(this).animate({ marginRight: 0 });
        $('.bioinfo').hide();

    });

как показать биоинфорию при наведении курсора.

Alex 19 дек. 2013, в 15:03

Источник

3

Вы, вероятно, должны предоставить html, который не является неполным и не имеет сломанных тегов.
TreeTree 19 дек. 2013, в 13:59
0

Скрипка была бы полезна.
Matt Burland 19 дек. 2013, в 14:01
0

Я изменил, пожалуйста, руководство.
Alex 19 дек. 2013, в 14:03
0

stackoverflow.com/questions/19180159/...
dileep kommireddy 19 дек. 2013, в 14:14

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Вы, вероятно, должны предоставить html, который не является неполным и не имеет сломанных тегов.
Я изменил, пожалуйста, руководство.

SW4 · Answer 1 · 2013-12-19T12-13-00.000Z

Если вы просто хотите показать .bioinfo при наведении, см.

FIDDLE

Вам не нужно будет jQuery делать this-, но я вижу, что вы используете анимацию, которую вы можете захотеть включить в CSS. Вы можете переключать поведение наведения с помощью псевдо-класса hover в CSS.

CSS

.bioinfo {
    display: none;
    max-height: auto;
    max-width: 220px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: rgba(108, 108, 108, 0.5) 5px 5px 5px;
    border: 2px solid #ccc;
    position: absolute;
    z-index: 100;
    /*    background: #eeeded; f6f6f6*/
    background: rgba(246, 246, 246, 0.8);
    font-size: 10px;
    padding: 15px 3px 3px 3px;
    text-align: justify;
}
li:hover .bioinfo {
    display:block;
}

NoobEditor · Answer 2 · 2013-12-19T12-23-00.000Z

За исключением сломанных тегов, ваш код в порядке. Сохраняя разметку, удалите ее right: -150px; из класса bioinfo и change top:150px top:0 в вас css, и он работает просто отлично. есть РАБОЧИЙ КОД