使用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 ...現在進行顯示：無/用表阻止並且它起作用。