用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 - 隐藏后不再显示 -

回答

相关问题