Question

我有一个包含列表框和按钮的webform。当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时，上面的代码不起作用。我用postback搞砸了并使用了if语句，例如if（button = red），display = block;然而，无济于事。我被困在这一点上。有谁知道我需要做些什么来让上面的代码工作？我是ASP.NET的新手，所以我不知道我是否也必须对html做些什么。此外，一个有趣的点，代码的backgroundcolor部分完美无缺。

我非常感谢大家的帮助。

Answer 1

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

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

或

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

另请查看此Display vs. Visibility article

Answer 2

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

您可以使用以下内容代替您的代码：

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

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

ASP.NET C＃OnMouseOver使ListBox出现和消失的事件

2 个答案: