ASP.NET C# OnMouseOver 事件使列表框出现和消失

Question

我有一个带有列表框和按钮的网络表单。 当 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 时，此代码有效。 不幸的是，当页面加载时，列表框始终可见，这是我想避免的。 当我将列表框设置为visible = false时，上面的代码不起作用。 我搞乱了回发并使用了 if 语句，例如 if (button = red), display=block; 然而，无济于事。 我被困在这一点上。 有谁知道我需要做哪些额外的事情才能使上述代码正常工作？ 我是 ASP.NET 新手，所以我不知道是否还需要对 html 做一些事情。 另外，一个有趣的点是，代码的背景颜色部分工作完美。

我真的很感谢大家的帮助。

Answer 1

当您在服务器端代码中设置 Listboxvisible="false" 时，列表框的 HTML 不会呈现并发送到客户端。 因此，您需要确保列表框得到渲染，但设置为在页面加载时不可见，方法是使用

• 初始 CSS 样式使列表框不可见，

或者

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

另请参阅这篇显示与可见性文章

Answer 2

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

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

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

悬停的第一个功能是鼠标悬停，第二个功能是鼠标悬停。 您还可以设置显示和隐藏的动画，使其看起来更光滑。