Question

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

如果将鼠标悬停在可能的地方，你如何制作一个隐藏的div？请不要告诉我如何建立链接，我知道如何建立链接;）

我试过了： a。）onmouseover将可见性和onmouseout的可见性设置为隐藏的可见性这适用于0浏览器

b。）将边框设置为0px，将background透明和innerhtml设置为“”onmouseout并恢复onmouseover 这适用于chrome

c。）这是互联网上最受欢迎的答案，我知道它不会起作用，但无论如何我都尝试过：将容器div设置为可见，然后将可见性显示为可见，并为内部div隐藏可见性

d。）将不透明度设置为1/100和0 适用于chrome

e。）最后的手段：我尝试制作一个透明的GIF并将其显示在onmouseout上这也失败了

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

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

Answer 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。

Answer 2

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

<强> HTML

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

<强> CSS

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

<强> JS

$(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');        
});

祝你好运！

Answer 3

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

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

当然，麻烦就是将鼠标放在隐藏的div上。

这适用于我曾经使用过的每个浏览器。

Answer 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>

mouseover show div

4 个答案: