1 
<div style='position:relative'>
<div id ='tag' style=' border: 1px solid red; position : absolute; top: 20px; left: 20px; width: 50px; height: 50px;'></div>
<img src='http://localhost/jlin.jpg' id='wow'>
</div>

这是我的html代码

window.onload = function(){
    var tag = document.getElementById('tag');

    tag.onmouseover = function(){
      tag.style.visibility = "hidden";
    }
    tag.onmouseout = function(){
    tag.style.visibility = "visible";
    }
}

这是我的 javsacript 代码。我希望当我将鼠标放在它上面时内部 div 隐藏，当我将鼠标光标移出它时再次出现。为什么当我将鼠标放在内部 div 上时，里面的 div 一直在闪烁？

第二个问题：实际上我想创建一个标记效果，所以当我将鼠标悬停在 div 上时它会出现。所以我将我的javascript代码更改为：

window.onload = function(){
    var tag = document.getElementById('tag');
    tag.style.visibility = "hidden";
    tag.onmouseover = function(){
      tag.style.visibility = "visible";
    }
    tag.onmouseout = function(){
    tag.style.visibility = "hidden";
    }
}

它不起作用。我尝试了另一种方法，即visibility: hidden;在 innerDiv 中添加内联并将 javascript 设置如下：

window.onload = function(){
    var tag = document.getElementById('tag');
    tag.onmouseover = function(){
      tag.style.visibility = "visible";
    }
}

好像也不行，为什么呢？这是第一个问题的小提琴：http: //jsfiddle.net/uFLPg/

4

3 回答 3

5

设置时visibility: hidden，不会向元素发送鼠标事件。

您所看到的是mouseout当元素隐藏时触发的事件，然后导致代码再次将其设置为可见，然后mouseover在鼠标移动时立即触发事件 - 依此类推。

这里的一些附加信息：不透明度：0 与可见性：隐藏的效果完全相同

改为使用opacity: 0。

小提琴

window.onload = function(){
    var tag = document.getElementById('tag');

    tag.style.opacity = 0;
    tag.onmouseover = function () {
        tag.style.opacity = 1;
    }
    tag.onmouseout = function () {
        tag.style.opacity = 0;
    }
}

如果您担心旧版浏览器对不透明度的支持，您仍然可以通过将divvisibility: hidden;包装在 a中并将其背景设置为. tagdivtransparent

将 mouseover/mouseout 处理程序附加到包装 div 并更改子项的可见性。这避免了重复的 mouseover/mouseout 事件，因为包装器将始终接收鼠标事件。

演示 2：

HTML：

<div style='position:relative'>
    <div id='tag' style='position : absolute; top: 20px; left: 20px; width: 50px; height: 50px; z-index: 10; background: transparent;'>
        <div id='tagInner' style=' border: 1px solid red; position : absolute; top: 0; left: 0; right: 0; bottom: 0;'>     
    </div>
    </div>
    <img src='http://www.hihowareyou.com/store/images/products/tn_HiVinylFrontmed.jpg' id='wow'>
</div>

代码：

var tag      = document.getElementById('tag');
var tagInner = document.getElementById('tagInner');

tagInner.style.visibility = 'hidden';
tag.onmouseover = function () {
    tagInner.style.visibility = 'visible';
}
tag.onmouseout = function () {
    tagInner.style.visibility = 'hidden';
}

在 CSSTricks 上还有一篇关于所有浏览器的 CSS 透明度设置的有趣文章。我自己没有在旧浏览器上尝试过这种方法，但它可能对你有用。

于 2013-09-06T04:58:23.750 回答
2

您要完成的工作可以在 CSS 中完成：

#tag:hover { opacity: 0; }

http://jsfiddle.net/Rh5wb/

于 2013-09-06T04:55:21.753 回答
1

使用不透明度和 js

var tag = document.getElementById('tag');

tag.onmouseover = function () {
    tag.style.opacity = 0;
}
tag.onmouseout = function () {
    tag.style.opacity = 1;
}

http://jsfiddle.net/uFLPg/1/ 1

于 2013-09-06T05:11:46.997 回答