用javascript隱藏/顯示CSS div - 隱藏後不再顯示 -

當我做一個鼠標懸停時，div'container'被隱藏。當我在空格處再次執行鼠標懸停時，div應該是沒有任何反應的，意味着它看不到。用javascript隱藏/顯示CSS 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>

來源

2011-05-18 msfanboy

我很專注於一個div ...現在做顯示：無/塊與表，它的工作。

來源

2011-05-20 18:34:19 msfanboy

隱藏元素不能觸發事件，那麼在你的情況下，我看到的只有一個可能的解決方案：使用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 。

來源

2011-05-18 09:56:59 bjornd

不再顯示div了！ – msfanboy 2011-05-18 10:03:05

隱藏的元素不能觸發事件，所以在你的情況下，我只看到一種可能的解決方案：使用'style.opacity = 0'和'style.opacity = 1'來代替'style.visibility ='hidden''和'style .visibility ='visible'。但這在舊版瀏覽器中不起作用。 – bjornd 2011-05-18 10:15:09

@bjornd你的評論是迄今爲止唯一一個實際上指事件不會觸發的事實。考慮發佈它作爲答案。 – Ronny 2011-05-18 10:25:42

試試這個

「如果（element.style.visibility == 」隱藏「） element.style.visibility = 」看得見「; 否則 element.style.visibility = 」隱藏「;
「

來源

2011-05-18 10:00:57 Devan

此功能清除所有以前的風格信息，所以不是最好的做法來做一些東西。

而是使用

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

來源

2011-05-18 10:01:46

它只是第二次鼠標懸停後隱藏的div，爲什麼這？ – msfanboy 2011-05-18 10:06:14

，因爲您的默認'e.style.display'不是第一次被阻止。添加'顯示：塊'你的風格，讓我知道它是否工作。 – 2011-05-18 10:08:18

沒有工作意味着與顯示div：沒有沒有得到塊（可見）了。：/現在我嘗試不透明提示。 – msfanboy 2011-05-18 10:42:38

你檢查的元素在visibility屬性，但它實際上是style對象 - 但你可能甚至當你做element.style.visibility，因爲這可能並不總是給結果感到驚訝你在正確的結果（在你的情況下，它會因爲你的設置內嵌樣式這是不好的做法，反正）

讓我們假設你設置你的CSS樣式的元素，像這樣：

#user { visibility: hidden; }

然後你檢查它：

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

它會包含一個空字符串"" - 而不是你最好應使用getComputedStyle真正得到什麼款式都IN USE。

來源

2011-05-18 10:07:58

用javascript隱藏/顯示CSS div - 隱藏後不再顯示 -

回答

相關問題