我试图在li
类.image
悬停时显示跨度,然后最好在将鼠标移离li后隐藏它。我正在使用下面的代码,但无济于事。
HTML
<ul>
<li class="image">
<span class="post_meta">Test 40in x 9in</span>
<img src="http://web.com">
</li>
</ul>
CSS
span.post_meta {
background: none repeat scroll 0 0 #000000;
bottom: 7px;
color: #FFFFFF;
display: block;
padding: 0 2px;
position: absolute;
right: 86px;
}
jQuery
$docuemnt.ready() {
$(function() {
$("li.image").hover(function() {
$(this).parent().next("span").show();
},function(){
$(this).parent().next("span").hide();
});
});
});
答案 0 :(得分:4)
您只能使用CSS
执行此操作.post_meta {
display:none;
}
li.image:hover .post_meta{
display:block;
}
修改强>
使用Jquery尝试:查看演示 http://jsfiddle.net/9RYhR/7/
$(document).ready(function () {
$('li.image').mouseenter( function() {
$(this).children('span').fadeIn();
});
$('li.image').mouseleave( function() {
$(this).children('span').fadeOut();
});
})
答案 1 :(得分:3)
使用此
$(function() {
$("li.image").hover(function() {
$(this).find("span").show();
},function(){
$(this).find("span").hide();
});
});
答案 2 :(得分:0)
你错误地拼写了document
并没有通过回调,但这并不是真的需要,因为$(function () { ... })
是$(document).ready(function () { ... })
的别名。
尝试以下方法:
$(function() {
$("li.image").hover(function() {
$(this).parent().next("span").show();
},function(){
$(this).parent().next("span").hide();
});
});
答案 3 :(得分:0)
<style>
#scope .post_meta{display:none;}
#scope li:hover{cursor:pointer;}
</style>
<ul id="scope">
<li class="image">
<span class="post_meta">Test 40in x 9in</span>
<img src="http://web.com">
</li>
</ul>
<script>
$(document).ready(function(){
$("#scope .image").hover(function() {
$('.post_meta').show();
},function(){
$('.post_meta').hide();
});
});
</script>