onmouseover onmouseout事件问题_html/css_WEB-ITnose
Jun 24, 2016 pm 12:23 PM
onmouseover
光标移到DIV1上显示DIV2,移开时隐藏。当然,当光标在DIV2上时该DIV也要显示。问题是,DIV2上有个下拉框,当点击下拉框,选择里面的选项时,DIV2会消失。
如何拯救啊?
回复讨论(解决方案)
补充DEMO代码如下:
<html><head><title></title></head><body> <div onmouseover="ShowDiv()" onmouseout="HideDiv()"> 鼠标移到这里显示另一个DIV </div> <div id="div2" style="width:200px;height:200px;border:1px solid #f00;display:none;" onmouseover="ShowDiv()" onmouseout="HideDiv()"> <select> <option>1</option> <option>2</option> <option>3</option> </select> 随便写一些内容 <br /> 这里是需要显示的DIV </div></body><script type="text/javascript"> function ShowDiv() { document.getElementById('div2').style.display = 'block'; } function HideDiv() { document.getElementById('div2').style.display = 'none'; }</script></html>
DIV2在DIV1外面啊,当然会隐藏了,你应该把DIV2覆盖在DIV1上面。
DIV2在DIV1外面啊,当然会隐藏了,你应该把DIV2覆盖在DIV1上面。
我觉得这跟DIV1关系不大,DIV1只是为了能触发显示DIV2的
关键在点击DIV2里的下拉框后,好像就被认为是光标移出了DIV2,这样就触发了DIV2里的onmouseout,所以就隐藏了。
你有没有发现按照你的div排版来做,你的第二格div是显示在第一个div下面的。
你有没有发现按照你的div排版来做,你的第二格div是显示在第一个div下面的。
是的,显示在哪里不要紧,这只是个DEMO,为了说明问题。你把光标移到DIV2上DIV2还是显示的吧,但点击DIV2里面的下拉框就隐藏了。
<div onmouseover="ShowDiv()" onmouseout="HideDiv(event)"> 鼠标移到这里显示另一个DIV </div> <div id="div2" style="width:200px;height:200px;border:1px solid #f00;display:none;" onmouseover="ShowDiv()" onmouseout="HideDiv(event)"> <select> <option>1</option> <option>2</option> <option>3</option> </select> 随便写一些内容 <br /> 这里是需要显示的DIV </div></body><script type="text/javascript"> function ShowDiv() { document.getElementById('div2').style.display = 'block'; } function HideDiv(e) { var e = e || window.event; var tg = e.target || e.srcElement; if(tg.tagName == "DIV"){ document.getElementById('div2').style.display = 'none'; } } </script>
鼠标在option上的mouseout 会触发父容器的mouseout事件。
<div onmouseover="ShowDiv()" onmouseout="HideDiv(event)"> 鼠标移到这里显示另一个DIV </div> <div id="div2" style="width:200px;height:200px;border:1px solid #f00;display:none;" onmouseover="ShowDiv()" onmouseout="HideDiv(event)"> <select> <option>1</option> <option>2</option> <option>3</option> </select> 随便写一些内容 <br /> 这里是需要显示的DIV </div></body><script type="text/javascript"> function ShowDiv() { document.getElementById('div2').style.display = 'block'; } function HideDiv(e) { var e = e || window.event; var tg = e.target || e.srcElement; if(tg.tagName == "DIV"){ document.getElementById('div2').style.display = 'none'; } } </script>
鼠标在option上的mouseout 会触发父容器的mouseout事件。
是啊,如何解决?
额,有点不懂你的意思了,我试过了,点击下拉框DIV2没有消失,不知道你是怎么做的,倒是按照你的div排版来做,我的鼠标是进不了div2的,因为div2在div1下面,出了div1,div2不就隐藏了吗,还怎么点击下拉框呢
额,有点不懂你的意思了,我试过了,点击下拉框DIV2没有消失,不知道你是怎么做的,倒是按照你的div排版来做,我的鼠标是进不了div2的,因为div2在div1下面,出了div1,div2不就隐藏了吗,还怎么点击下拉框呢
无标题文档 <div onmouseover="ShowDiv()" onmouseout="HideDiv(event)"> 鼠标移到这里显示另一个DIV </div> <div id="div2" style="width:200px;height:200px;border:1px solid #f00;display:none;" onmouseover="ShowDiv()" onmouseout="HideDiv(event)"> <select> <option>1</option> <option>2</option> <option>3</option> </select> 随便写一些内容 <br /> 这里是需要显示的DIV </div></body><script type="text/javascript"> function ShowDiv() { document.getElementById('div2').style.display = 'block'; } function HideDiv(e) { var e = e || window.event; var tg = e.target || e.srcElement; if(tg.tagName == "DIV"){ document.getElementById('div2').style.display = 'none'; } } </script>
解决方法是给HideDiv(e)加上事件参数,判断事件源的tagName
额,有点不懂你的意思了,我试过了,点击下拉框DIV2没有消失,不知道你是怎么做的,倒是按照你的div排版来做,我的鼠标是进不了div2的,因为div2在div1下面,出了div1,div2不就隐藏了吗,还怎么点击下拉框呢
你不前后矛盾么?又说点击DIV2里的下拉框后DIV2没有消失,又说鼠标进不了DIV2,如果进不了你是怎么点下拉框的?
不是点击下拉框,是点击下拉框后移到别的OPTION上去。
你不前后矛盾么?又说点击DIV2里的下拉框后DIV2没有消失,又说鼠标进不了DIV2,如果进不了你是怎么点下拉框的?
不是点击下拉框,是点击下拉框后移到别的OPTION上去。
我只是把div2放在了div1里面
你不前后矛盾么?又说点击DIV2里的下拉框后DIV2没有消失,又说鼠标进不了DIV2,如果进不了你是怎么点下拉框的?
不是点击下拉框,是点击下拉框后移到别的OPTION上去。
我只是把div2放在了div1里面
可能是浏览器兼容性问题,我用的是IE8把DIV2放下面没有问题
问题解决了,如xiaofanku说的解决方案,谢谢

熱門文章

熱門文章

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素?
