怎样用js或者jquery实现效果(模仿京东的下拉菜单展开),有图,有我的原代码 5C

图片说明图片说明
需要实现的效果:两个div(上下),首先下div是隐藏的,鼠标放在上div,下div显示,鼠标放在下div上,下div显示,鼠标移开 上和下 div时,下div都要隐藏。
我的部分代码:
``







商品信息>




<!-- 隐藏商品信息div-->

影藏Div

<br> $(function(){<br> $(&quot;.goodsInfo&quot;).hide();<br> $(&quot;.pointer&quot;).hover(<br> /*鼠标放上去动作*/<br> function(){<br> $(&quot;.goodsInfo&quot;).show();<br> },<br> /*鼠标移开动作*/<br> function() {<br> if( $(&quot;.goodsInfo&quot;).show()){<br> $(&quot;.goodsInfo&quot;).hide();<br> }else{<br> $(&quot;.goodsInfo&quot;).show();<br> }<br> }<br> );<br><br>
求代码实现该效果,谢谢了!

4个回答

这个不难的嘛,就按照你的需求在两个div上面写鼠标获取焦点和失去焦点事件就是撒。

a_2113106
a_2113106 我刚试过了,不行啊
3 年多之前 回复

我刚试过了,不行 啊

用浏览器的f12调试,给你的js代码加断点或者在js中间写debugger,跟一下js代码看哪一步有问题。把断点加在监听事件的js上

有两种方式:1、css3样式控制 2、js控制
(命名:.div1-上div,.div2-下div)

第一种方式:
.div1:hover .div2{
display:none;
/* transition:display 1s linear; 添加动画用的*/
}

.div2:hover {
display:none;
/* transition:display 1s linear; 添加动画用的*/
}

第二种方式:
$('.div1').on('mouseover',funciton(){
$('.div2').show(200);
})

$('.div1').on('mouseout',funciton(){
$('.div2').hide(200);
})

$('.div2').on('mouseover',funciton(){
$('.div2').show(200);
})

$('.div2').on('mouseout',funciton(){
$('.div2').hide(200);
})

相比较如果单方面实现这个功能的吧 还是css比较方便,js想的啰嗦,如果你想封装起来,以后直接使用的话,还是选择js

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问