Question

求教隐藏带有onmouseover和onmouseout事件的div

div代码如下

<div id="test_div" class="'mydd_bought" onmouseover="this.className='mydd_bought div_mouseover'" onmouseout="this.className='mydd_bought div_mouseout'">

css代码

.div_mouseover{ background-color:#f9f9f9}
.div_mouseout{ background-color:#fff}

现在是想要隐藏这个div，但是，因为存在mouseover和mouseout俩个事件，隐藏不了。
求高人指点，怎么才能隐藏这样的div？

Answer 1

<div id="test_div" class="'mydd_bought" onmouseover="this.className='mydd_bought div_mouseover'" onmouseout="this.className='mydd_bought div_mouseout'">

css代码

.div_mouseover{ background-color:#f9f9f9;display:none;}
.div_mouseout{ background-color:#fff;display:block}

.div_mouseover 这个是隐藏的class既然是隐藏的那要把它的display置为none反正显示的置为block

不过楼主你这样做不合适，因为你把div都隐藏了 那你在移动上去找不到元素也就没法相应onmouseover事件了

不过你可以用visibility 试试

追问

页面上有多个这样的div，我只想回调的时候隐藏指定的div，其它div还要继续触发事件的。
所以不能把样式写入进去。

追答

那你回调的时候 用this 指向这个dom 把当前的dom display设置为none就好了

追问

设置当前为none可以了，谢谢哈！

Answer 2

一、代码需要判断：
1）在onmouseover时先进行如下判断，结果为true时再执行方法体：
var s = e.fromElement || e.relatedTarget ;
if(!this.contains(s)){MouseOverFunc()}

2）在onmouseout时先进行如下判断，结果为true时再执行方法体：
var s = e.toElement || e.relatedTarget ;
if(!this.contains(s)){MouseOutFunc()}

二、所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那就忽略这个事件。
1）event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；2）event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。

那么上面两行代码的含义就分别是：
○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；

○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；

这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件。

Answer 3

#test_div{display:none;width:1px;height:1px;font-size:1px;overflow:hidden;}

试试

追问

我是想ajax执行回调函数的时候隐藏这个div

追答

你回调的时候写入样式不就行了？

追问

回调的时候试过用$("#test_div").removeClass();$("#test_div").unbind();
不过不好使。

追答

removeClass()是需要带参数的。unbind只是解除绑定事件。

追问

不带参数移除所有样式，试过用settimeout来解决，不过根据鼠标位置有时候能达到要求有时候不行。