87,997
社区成员
发帖
与我相关
我的任务
分享我是小白，想了很久，查了很久，搞不通了，忍不住又来打扰大家。。。
我想实现的效果是:当鼠标移动到一块区域时，在这块区域显示黑色底色，区域上有超链接存在,此时超链接得能用。onmouseover, hover，我都试过，但是鼠标移动到超链接上时，底色就消失了。用hover的话代码很简单，但是对浏览器的兼容性差。怎么办呢，求解决办法。
谢谢大家。
谢谢大家。
...全文
请发表友善的回复…
发表回复
a13849178851 2011-03-16
- 打赏
- 举报
弱弱地问下哈，如果我想要执行的动作并不是div.style.background = "Gray";这么简单，还有其他的动作，该怎么写啊，比如执行.s{background-color:Gray；font-size.....}这个样式表里的全部样式？[Quote=引用 6 楼 damon_lan 的回复:]
这个应该不算太难吧！
HTML code
<head>
<title></title>
<script type="text/javascript">
function MouseUp() {
var div = document.getElementById("div");
div.style.backgro……
[/Quote]
这个应该不算太难吧！
HTML code
<head>
<title></title>
<script type="text/javascript">
function MouseUp() {
var div = document.getElementById("div");
div.style.backgro……
[/Quote]
去圣西罗-为尤文喝彩 2011-03-16
- 打赏
- 举报
css可能有问题，2个A:HOVER会冲突。。。
汉尼拔 2011-03-15
- 打赏
- 举报
用hover的话代码很简单，但是对浏览器的兼容性差
哪里差了?
哪里差了?
ldq67123 2011-03-15
- 打赏
- 举报
弱弱问下，css不是更好吗
#target-div:hover{
background-color:black;
text-decoration:underline;
display:block;
padding:10px;
}
fengqipiaobo 2011-03-15
- 打赏
- 举报
jQuery 框架的hover 函数，好用的，兼容性也没问题！
Damon_lan 2011-03-15
- 打赏
- 举报
这个应该不算太难吧！
<head>
<title></title>
<script type="text/javascript">
function MouseUp() {
var div = document.getElementById("div");
div.style.background = "Red";
}
function MouseLeft() {
var div = document.getElementById("div");
div.style.background = "Gray";
}
</script>
</head>
<body>
<div style=" width:50px; height:20px; background-color:Gray" onmouseover="MouseUp()" onmouseout ="MouseLeft()" id="div">
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
jdq819 2011-03-15
- 打赏
- 举报
[Quote=引用 4 楼 chenyuqing2009 的回复:]
2楼貌似不见了。。
[/Quote]
2楼貌似不见了。。
[/Quote]
chenyuqing2009 2011-03-15
- 打赏
- 举报
2楼貌似不见了。。
hch126163 2011-03-15
- 打赏
- 举报
但是鼠标移动到超链接上时，底色就消失了
触发了 onmouseout 事件！
解决HTML内部元素的Mouse事件干扰
话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。
为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：
当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。
这可不是我想要的，那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢？
这里列举两种方法：
一. setTimeout
因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。
具体的执行过程请看下图（纵向的虚线表示时间）：
这是个很巧妙的的方法，因为当onmouseout触发后，实质性的方法并没有马上执行，而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件，那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了，所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。
二.contains
在onmouseover时先进行如下判断，结果为true时再执行方法体：
var s = e.fromElement || e.relatedTarget ;
if(!this.contains(s)){MouseOverFunc()}
在onmouseout时先进行如下判断，结果为true时再执行方法体：
var s = e.toElement || e.relatedTarget ;
if(!this.contains(s)){MouseOutFunc()}
下面来解释一下上面两行代码的含义：
在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是：
○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；
○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；
这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：
if(typeof(HTMLElement) != "undefined")
{
HTMLElement.prototype.contains = function(obj)
{
while(obj != null && typeof(obj.tagName) != "undefined")
{
if(obj == this)
return true;
obj = obj.parentNode;
}
return false;
};
}
触发了 onmouseout 事件！
解决HTML内部元素的Mouse事件干扰
话说有一个DIV元素，其内部有一个IMG元素和SPAN元素，不用理会这两个内部元素怎么布局，这不是我要讨论的重点。
为了实现一些特殊的效果，我需要利用TD的onmouseover和onmouseout事件，测试时就会发现如下的状况：
当鼠标移入DIV内部时，onmouseover事件被触发；接着再鼠标移动到DIV内部的IMG或者SPAN元素之上，我们肯定不会认为这时鼠标已经移到了DIV的外边，但奇怪的是onmouseout事件触发了，而且紧接着onmouseover事件也马上被触发了。
这可不是我想要的，那么怎么来“屏蔽”内部元素给外层元素带来的Javascript事件干扰呢？
这里列举两种方法：
一. setTimeout
因为在鼠标移动到内部元素之上而触发了外层元素的onmouseout事件后，外层元素的onmouseover也会马上触发，所以我们只需要把外层元素的onmouseout事件需要执行的动作延迟很短的一段时间来运行，然后在onmouseover事件中再执行clearTimeout方法，这样就可以避免内部元素引起的事件干扰。
具体的执行过程请看下图（纵向的虚线表示时间）：
这是个很巧妙的的方法，因为当onmouseout触发后，实质性的方法并没有马上执行，而是要等待一小段时间。如果在这段时间里马上又触发了 onmouseover事件，那么基本上就可以肯定onmouseout事件的触发是因为内部元素的干扰了，所以在onmouseover事件中使用 clearTimeout来阻止延时的方法执行。
二.contains
在onmouseover时先进行如下判断，结果为true时再执行方法体：
var s = e.fromElement || e.relatedTarget ;
if(!this.contains(s)){MouseOverFunc()}
在onmouseout时先进行如下判断，结果为true时再执行方法体：
var s = e.toElement || e.relatedTarget ;
if(!this.contains(s)){MouseOutFunc()}
下面来解释一下上面两行代码的含义：
在IE中，所有的HTML元素都有一个contains方法，它的作用是判断当前元素内部是否包含指定的元素。我们利用这个方法来判断外层元素的事件是不是因为内部元素而被触发，如果内部元素导致了不需要的事件被触发，那我们就忽略这个事件。
event.fromElement指向触发onmouseover和onmouseout事件时鼠标离开的元素；event.toElement指向触发onmouseover和onmouseout事件时鼠标进入的元素。
那么上面两行代码的含义就分别是：
○ 当触发onmouseover事件时，判断鼠标离开的元素是否是当前元素的内部元素，如果是，忽略此事件；
○ 当触发onmouseout事件时，判断鼠标进入的元素是否是当前元素的内部元素，如果是，忽略此事件；
这样，内部元素就不会干扰外层元素的onmouseover和onmouseout事件了。
但问题又来了，非IE的浏览器并不支持contains函数，不过既然我们已经知道了contains函数的作用，就可以自行添加如下的代码来为非IE浏览器增加contains支持：
if(typeof(HTMLElement) != "undefined")
{
HTMLElement.prototype.contains = function(obj)
{
while(obj != null && typeof(obj.tagName) != "undefined")
{
if(obj == this)
return true;
obj = obj.parentNode;
}
return false;
};
}
