鼠标悬停显示 div答案

【问题标题】：mouseover show div鼠标悬停显示 div
【发布时间】：2012-01-06 05:32:48
【问题描述】：

我无法在任何地方找到答案。

当鼠标悬停在本来应该出现的位置时，如何使隐藏的 div 出现？请不要告诉我如何制作链接，我知道如何制作链接;）

我尝试过： a.) onmouseover 设置可见性为可见，onmouseout 设置可见性为隐藏这适用于 0 个浏览器

b.) 设置边框为 0px，背景透明，innerhtml 设置为 "" onmouseout 并恢复 onmouseover 这适用于铬

c。）这是互联网上最受欢迎的答案，我知道这行不通，但我还是尝试了：将容器 div 设置为可见，然后为内部 div 设置可见性和隐藏性

d.) 将不透明度设置为 1/100 和 0 在 chrome 中工作

e.) 最后的手段：我尝试制作一个透明的 gif 并让它显示 onmouseout 这也失败了

我没有尝试过 jquery 的 .hover，但我读到它可能无法正常工作。

我没有其他想法。请问有人帮忙吗？

【问题讨论】：

不透明度方法有什么问题？
在 chrome 和 webkit 中运行良好，我认为是 firefox，但在 IE 中当然不行！
但您只需将过滤器设置为 alpha(opacity=XX) 即可获得 IE6-8 支持。
我做到了，也许我在这里遗漏了一些东西，
document.getElementById('ELE_' + id).style.opacity = 0; document.getElementById('ELE_' + id).style.filter = "alpha(opacity=0)";

标签： javascript html show onmouseover

【解决方案1】：

如果我做对了，你希望 div 元素显示你是否在它上面，并在鼠标没有结束时隐藏。如果是这样，您只能使用 html 和 css：

<head>
<style>
        #outerDiv{width:100px;height:100px;background-color:blue;}
        #innerDiv{width:100px;height:100px;background-color:red;display:none;}
        #outerDiv:hover #innerDiv {display:block;}
    </style>
</head>
<html>
    <div id="outerDiv">
        <div id="innerDiv">some text</div>
    </div>
</html>

外部 div 始终可见，当它悬停时，会显示内部 div。

【讨论】：

outerdiv 内容为空时如何显示？它将不可见。
外部 div 有固定的尺寸 - 所以它是可见的。在这里试试：jsfiddle.net/wVpBu
我认为 display:none 让它工作，因为它在 IE 中为我在 jsfiddle 中工作，非常感谢 Draganov！

【解决方案2】：

我认为这会对你有所帮助：http://jsfiddle.net/eb4x9/ 隐藏 div 时不会触发 mouseover 事件，因此您可以检测它的位置和大小。以下是出处：

HTML

<div id="foo"></div>

CSS

#foo {
    width: 300px;
    height: 300px;
    background-color: red;
    visibility: hidden;    
}

$(document).mousemove(function (event) {
    var div = $('#foo'), 
        divLeft = div.offset().left, 
        divTop = div.offset().top, 
        divWidth = div.width(), 
        divHeight = div.height();
    if ((event.pageX >= divLeft && event.pageX <= divLeft + divWidth) &&
        (event.pageY >= divTop && event.pageY <= divTop + divHeight)) {
        div.css('visibility', 'visible');
    } else {
        div.css('visibility', 'hidden');        
    }
});
$(document).mouseleave(function (event) {
    var div = $('#foo');
    div.css('visibility', 'hidden');        
});

最好的问候！

【讨论】：

是的，我认为它最终可能看起来像这样，但考虑到 div 是圆形的，我希望有一种更简单的方法。我将不得不使用椭圆函数生成一个点数组，但是哦，它已经足够接近了！感谢您的回复！

【解决方案3】：

尝试在 onmouseover 事件中将 div 的 display 属性设置为“block”，并将 visibility 属性设置为“visible”。

将显示设置为“无”，将可见性设置为“隐藏”以隐藏。

当然，问题在于将鼠标放在隐藏的 div 上。

这适用于我曾经使用过的所有浏览器。

【讨论】：

完全正确。一旦它被隐藏，我就很难过。
@Ryan gotcha，诀窍是选择一个已经显示的 div 或对象——大概，你有一些东西在显示另一个应该显示的地方——然后使用 onmouseover事件来设置我提到的属性。
@Ryan 您可以添加一个具有一定高度和宽度的空 div。此 div 的鼠标悬停将原始 div 的显示设置为“阻止”
@rahool，一个空的 div 仍然不会显示，因为容器仅与其内容一样大。不过你可以有一个透明的图像。
@Jonathan，如果空的 div 有一些高度和宽度，它应该显示出来。请查看我发布的答案。

【解决方案4】：

试试这个，让两个 div 一个为空，另一个与您的内容并在鼠标悬停时在它们之间切换

<html>
<head>

<script>
function toggle() {
    var your_div = document.getElementById("your_div");
    var empty_div = document.getElementById("empty_div");

    if(your_div.style.display == "block") {
            your_div.style.display = "none";
            empty_div.style.display = "block";
    }
    else {
            your_div.style.display = "block";
            empty_div.style.display = "none";
    }
}
</script>

<style>
   #empty_div{width:100px; height:100px;}
   #your_div{width:100px; height:100px; border: 1px solid #000fff;}
</style>
</head> 

<body>
   <div id="your_div" onmouseover="toggle()">xyz</div>
   <div id="empty_div" onmouseover="toggle()"></div>
</body>
</html>

【讨论】：

有个有趣的想法。不完全是我的想法，但这绝对是一种很酷的方法。