Question

鼠标悬停后，div'容器'将被隐藏。当我再次在空白区域上执行鼠标操作时，div应该没有任何反应意味着它不可见。

我错了什么？

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

   <script type="text/javascript">
       function ShowUserInterface(containerToSwitch) {
           debugger;
           var element = document.getElementById(containerToSwitch);

           if (element.getAttribute("visibility") == "hidden")
               element.setAttribute("style", "visibility: visible");
           else
               element.setAttribute("style", "visibility: hidden");  


       }
</script> 
<div  style="visibility:visible;width:200px;height:200px;background-color:Aqua" onmouseover="ShowUserInterface(this.id)" id="container" >
    <uc1:WebUserControl ID="WebUserControl1" runat="server" />
</div>
</asp:Content>

Answer 1

隐藏元素无法触发事件，因此在您的情况下，我只看到一种可能的解决方案：使用style.opacity = 0和style.opacity = 1代替style.visibility = 'hidden'和style.visibility = 'visible'。但这在旧浏览器中不起作用。

另外，如果你想获得一些样式属性，请使用element.style.visibility，而不是element.getAttribute('visibility')：

if (element.style.visibility == "hidden")
    element.style.visibility = "visible";
else
    element.style.visibility = "hidden";

或者更好地使用一些js框架（jQuery，prototype.js，mootools），特别是如果你的项目需要大量的JavaScript。

Answer 2

试试这个

” if（element.style.visibility ==“hidden”） element.style.visibility =“visible”; 其他 element.style.visibility =“hidden”;
“

Answer 3

此功能清除所有以前的样式信息，因此不是切换内容的最佳做法。

改为使用

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

Answer 4

您检查元素上的visibility属性，但它实际上位于style对象上 - 但即使您执行element.style.visibility，您可能会对结果感到惊讶，因为这可能不会总是给你正确的结果（在你的情况下它会，因为你的设置内联样式，这是不好的做法）

假设您在元素上设置CSS样式，如下所示：

#user { visibility: hidden; }

然后你检查了它：

alert(document.getElementById('user').style.visibility);

它将包含一个空字符串"" - 相反，您应该理想地使用getComputedStyle来实际获取 IN USE中的样式。

Answer 5

我如此专注于一个div ...现在做显示：没有/阻止一个表，它工作。

使用javascript隐藏/显示css div - 隐藏后不再显示 -

5 个答案: