Question

我正试图在onMouseOver上有三个图像链接分别显示三个独立的div。

<script type="text/javascript">
function toggleVisibility(divid) {
if (divid="1"){
    document.getElementById("1b").style.visibility = "visible";
    document.getElementById("2b").style.visibility = "hidden";
    document.getElementById("3b").style.visibility = "hidden";
}
else if (divid="2")
{
    document.getElementById("1b").style.visibility = "hidden";
    document.getElementById("2b").style.visibility = "visible";
    document.getElementById("3b").style.visibility = "hidden";
}
else if (divid="3")
{
    document.getElementById("1b").style.visibility = "hidden";
    document.getElementById("2b").style.visibility = "hidden";
    document.getElementById("3b").style.visibility = "visible";
}
}
</script>

在所有三个锚标签上使用这些onMouseOver事件。

onmouseover="toggleVisibility('1');"
onmouseover="toggleVisibility('2');"
onmouseover="toggleVisibility('3');"

然而，

所有3，当onMouseOver时，显示 1a 。就是这样。

当其他2个被翻转并且2a + 3a完全没有显示时，1a不会被隐藏。

由于

HTML + CSS：

<div id="wrapper">
<div style="width:910px;height:300px;margin:0;padding:0;">
<div id="1b">&nbsp;</div>
<div id="2b">&nbsp;</div>
<div id="3b">&nbsp;</div>
<a href="#" onmouseover="toggleVisibility('1');" class="1"></a>
<a href="#" onmouseover="toggleVisibility('2');" class="2"></a>
<a href="#" onmouseover="toggleVisibility('3');" class="3"></a>
</div>
</div>

#wrapper {
width: 896px;
margin: 0px auto;
text-align: left;
overflow: hidden;
}

#1b {
width:303px;
height:150px;
visibility:hidden;
float:left;
background-color:#DED6C5;
}

.1 {
float:left;
height:130px;
width:303px;
display:block;
background-image:url('images/organizational.jpg');
}

我将此帖中的名称修改为“1,2,3,1b，2b，3b”以进行清理并更容易理解。

其他人的CSS与1和1b相同，只是名称已更改。

Answer 1

您的错误符合您的条件。

使用if时，有效运算符为|| && == === < > <= { {1}}但您使用的是>=。

尝试使用=，它应该可以使用。

编辑：

Anthony Hessler为您的代码添加了一个很好的优化，您应该检查一下！

Answer 2

除了关于正确条件格式的答案之外，我建议更新您的可见性切换功能以减少重复代码的数量，这样可以在需要时更容易添加更多潜水。像这样的东西应该对你有好处，因为它循环你拥有的div的数量，并进行1次条件检查以查看传入的数字是否与循环迭代值匹配，并相应地设置可见性。

function toggleVisibility(divid) {
    var i;
    for (i = 1; i < 4; i += 1) {
        if (divid === i) {
            document.getElementById(i + "b").style.visibility = "visible";
        } else {
            document.getElementById(i + "b").style.visibility = "hidden";
        }
    }
}

希望它有所帮助！

Answer 3

如果您可以使用移动div上方的链接（或者使用一些聪明的定位），则可以使用无javascript解决方案。

示例：http://jsfiddle.net/XUwwY/

概念：

.org:hover ~ #orginfo {
     visibility: visible;   
}

javascript onmouseover 3个独立div的可见性切换

3 个答案: