目錄
回复讨论(解决方案)
首頁 web前端 html教學 onmouseover onmouseout事件问题_html/css_WEB-ITnose

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说的解决方案,谢谢

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

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

使用IFRAME的安全性含義是什麼?如何減輕它們? 使用IFRAME的安全性含義是什麼?如何減輕它們? Mar 18, 2025 pm 02:51 PM

使用IFRAME的安全性含義是什麼?如何減輕它們?

我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? 我如何使用html5&lt; meter&gt; 要在範圍內顯示數值數據的元素? Mar 12, 2025 pm 04:08 PM

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

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

HTML5中跨瀏覽器兼容性的最佳實踐是什麼?

如何有效地使用HTML鏈接進行導航和SEO? 如何有效地使用HTML鏈接進行導航和SEO? Mar 18, 2025 pm 02:39 PM

如何有效地使用HTML鏈接進行導航和SEO?

See all articles