jquery元素悬停效果

jquery元素悬停效果,第1张

鼠标离开li元素,移到div上div不消失。这个还要结合css,通过相对定位(绝对也行),利用他们的层叠性z-index,使div在li下面。

<style type="text/css">

*{ margin:0padding:0}

ul{ overflow:autoposition:relativez-index:2top:1px}/*通过top:1px,使li覆盖div一个像素*/

li{ float:leftlist-style:nonemargin:0 10px}

#div1{ width: 150pxheight:100pxbackground:#cccdisplay:noneposition:relativez-index:1}

</style>

<script type="text/javascript">

$(function(){

$("li,#div1").hover(

function(){

$("#div1").show()

},

function(){

$("#div1").hide()

}

)

})

</script>

</head>

<body>

<ul id="ul1">

<li><a href="#">list1</a></li>

<li><a href="#">list2</a></li>

<li><a href="#">list3</a></li>

</ul>

<div id="div1"></div>

</body>

</html>

如果hidden是你的隐藏class的话,写法如下:

$('.samples').mouseover(function () {

$(this).find('.author').removeClass('hidden')

})

$('.samples').mouseleave(function () {

$(this).find('.author').addClass('hidden')

})


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11948525.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存