[英]Tooltip Div is not show when hover
I have used belwo the code for show the details when hover but the div is moving to left side but bioinfo is not show so can you please guide? 我已经使用了belwo代码来显示悬停时的细节但是div正在向左侧移动但是bioinfo没有显示所以你能指导吗? how to implement this in jquery. 如何在jquery中实现它。
in html file 在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>
in css file 在css文件中
css file 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;
}
In Jquery 在Jquery
$('.ch-grid > li').hover(function() {
$(this).animate({ marginRight: 120 });
$(this).children('.bioinfo').show();
}, function() {
$(this).animate({ marginRight: 0 });
$('.bioinfo').hide();
});
how to show the bioinfo when hover. 如何在悬停时显示bioinfo。
If you simply want to show .bioinfo
on hover, see 如果您只是想在悬停时显示.bioinfo
,请参阅
You shouldn't need any jQuery to do this- but I see you are using an animation which you may want to incorporate into the CSS. 你不应该需要任何jQuery来做到这一点 - 但是我看到你正在使用一个动画,你可能想要将它整合到CSS中。 You can toggle hover behaviour by using the :hover pseudo class in CSS . 您可以通过在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;
}
Except for broken tags, Your code is fine. 除了破损的标签,你的代码没问题。 Keeping your markup same, remove right: -150px;
保持你的标记相同,删除right: -150px;
from class bioinfo
and change top:150px
to top:0
in you css and it works just fine.here is WORKING CODE 从类bioinfo
和更改top:150px
到top:0
你在css中的top:0
,它工作得很好。 工作代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.