ASP.NET C# OnMouseOver 事件使 ListBox 出现和消失答案

【问题标题】：ASP.NET C# OnMouseOver Event to Make ListBox Appear and DisappearASP.NET C# OnMouseOver 事件使 ListBox 出现和消失
【发布时间】：2010-10-23 21:40:51
【问题描述】：

我有一个包含列表框和按钮的网络表单。当 onmousover 事件触发时，列表框会出现；但是在页面加载时，列表框不应该是可见的。我有以下代码（请原谅背景颜色的变化）：

Button2.Attributes.Add("onmouseout", 
                       "this.style.backgroundColor='Blue', 
                       ListBox3.style.display ='none'");
Button2.Attributes.Add("onmouseover", 
                       "this.style.backgroundColor='Red',
                       ListBox3.style.display='block'");

当 listbox.visible 设置为 true 时，此代码有效。不幸的是，当页面加载时，列表框总是可见的，这是我想要避免的。当我将列表框设置为可见 = false 时，上面的代码不起作用。我搞砸了回发并使用了 if 语句，例如 if (button = red), display=block;然而，无济于事。我被困在这一点上。有谁知道我需要做些什么才能使上述代码正常工作？我是 ASP.NET 的新手，所以我不知道我是否还必须对 html 做一些事情。另外，有趣的一点是，代码的背景色部分完美无缺。

非常感谢大家的帮助。

【问题讨论】：

标签： c# asp.net listbox visibility onmouseover

【解决方案1】：

当您在服务器端代码中设置 Listbox visible="false" 时，不会呈现列表框的 HTML 并将其发送到客户端。因此，您需要确保列表框被呈现，但设置为在页面加载时不可见，无论是通过

具有使列表框不可见的初始 CSS 样式

或

在 DOM 加载后，使用客户端上的 JavaScript 将其设置为不可见。

也看看这个Display vs. Visibility article

【讨论】：

【解决方案2】：

您可以使用 jQuery javascript 库轻松完成此操作。

您将拥有类似以下的代码，而不是您的代码：

$('#buttonid').hover(function(){
   $(this).css('background','blue');
   $('#listboxid').hide('fast');
}, function(){
   $(this).css('background','red');
   $('#listboxid').show('fast');
});

hover 的第一个功能是 mouseover，第二个功能是 mouseout。您还可以对其显示和隐藏进行动画处理，使其看起来更流畅。

【讨论】：