当我将鼠标悬停在其母li上时,我正试图在文本链接上触发悬停状态。这是否可能在CSS中;其次,我错过了.children可以解决这个问题。这是HTML:
<li class="video-1">
<a href="#"><img src="images/csi-1.gif" alt="csi-1" width="140" height="80" /></a>
<h3 class="show-title"><a href="#">Show TItle</a></h3>
<h3 class="ep-name"><a href="#">Episode Name</a></h3>
<h4 class="season-info">Season 4 | Ep 10<span class="more"><a href="#">See More</a></span></h4>
</li>
和JS:
$(".more").hide();
$(".video-1").hover(function () {
$(".video-1:hover h3.show-title a").css('color', '#006699'),function() {
$(this).css("color", "#fff");
}
$(".more").toggle();
});
答案 0 :(得分:11)
您可以像这样使用CSS(在样式表中)执行悬停效果:
.video-1 .more { display: none }
.video-1:hover h3.show-title a { color: #006699 }
.video-1:hover .more { display: block }
除非您需要支持 支持:hover
元素上的a
的IE6,否则根本不需要JS。
<强>更新强>
如果您还需要支持IE6,可以在HTML中添加这样的内容:
<!--[if lte IE 6]>
<script type="text/javascript" charset="utf-8">
jQuery(function ($) {
$('#video-1').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
});
</script>
<![endif]-->
然后像这样调整CSS:
#video-1 .more { display: none }
#video-1:hover h3.show-title a, #video-1.hover h3.show-title a { color: #006699 }
#video-1:hover .more, #video-1.hover .more { display: block }
最后,将原始HTML从class
更改为id
,因为IE6不支持CSS中的链式类名称:
<li id="video-1">
答案 1 :(得分:1)
.video-1:hover{color:#fff}
.video-1 .more { display: none }
.video-1:hover .more { display: block; z-index:10 }
z-index
将确保显示在页面