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

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“; else 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来实际获取正在使用的样式。

Answer 5

我当时专注于div ...现在进行显示：无/用表阻止并且它起作用。