Я использовал belwo код для отображения деталей при наведении курсора, но div перемещается на левую сторону, но bioinfo не отображается, поэтому можете ли вы, пожалуйста, направить? как реализовать это в jquery.Tooltip Div не отображается, когда наведите указатель мыши
в 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();
});
как показать bioinfo когда парения.
Вы, вероятно, следует предоставить HTML, который не является неполным и не нарушили теги. – TreeTree
[fiddle] (http://jsfiddle.net/) было бы полезно. –
i модифицировано пожалуйста руководство. – Alex