当鼠标悬停在DropDownList项目上时显示图片ASP.NET

-1

编辑显然你不能做我想到的，我没有发现我的问题的解决方案。当鼠标悬停在DropDownList项目上时显示图片ASP.NET

我目前正在学习ASP.NET，并且我想将图片与来自asp：DropDownList的每个项目关联起来。我使用C＃作为编程语言和ASP.NET WebForm。

的什么，我试图做例子：

当用户打开一个DropDownList，并徘徊通过其项目，在某种PictureBox中的我想显示的每个项目的相关图像。

想象一下DropDownList包含：Dog，Cat，Lion。

当用户打开DropDownList并悬停在这些项目上时，DropDownList旁边会显示一条狗，一只猫或一只狮子。

我不希望使用DropDownList的SelectedIndexChanged事件，因为只有在选择了选项后才会触发该事件。

谢谢！

还有一件事，我知道我应该使用jQuery或/和CSS，但请具体如果你有一个解决方案。

来源

2016-07-28 AdamK

您使用了术语“悬停”，并用'javascript'标记了问题，因此您必须知道从哪里开始。如果您尝试并显示您的代码，您将获得更多帮助。 – Crowcoder

你可以做这样的事情......

在代码隐藏通过他们添加的项目将DropDownList和循环添加自定义属性imageName：

DropDownList1.Items.Insert(0, new ListItem("Dog", "Dog", true)); 
DropDownList1.Items.Insert(1, new ListItem("Cat", "Cat", true)); 
DropDownList1.Items.Insert(2, new ListItem("Lion", "Lion", true)); 

string[] imageArray = new string[] { "dog.jpg", "cat.jpg", "lion.jpg" }; 
int i = 0; 
foreach (ListItem item in DropDownList1.Items) 
{ 
    item.Attributes.Add("imageName", imageArray[i]); 
    i++; 
}

再上。 aspx页面绑定悬停功能DropDownList的选项，以显示图像：

<script> 
$(document).ready(function() { 
    $("#<%=DropDownList1.ClientID %> option").hover(function (event) { 
     var image = $(this).attr("imageName"); 
     document.getElementById('imagePanel').innerHTML = '<img src="' + image + '">'; 
    }); 
}); 
</script> 

<div id="imagePanel"></div> 
<br /> 
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>

您可能需要添加hoverIntent到脚本延迟的加载徘徊时的图像。

来源

2016-07-28 12:21:31 VDWWD

显然，您不能将悬停事件添加到DropDownList元素。 – AdamK

当鼠标悬停在DropDownList项目上时显示图片ASP.NET

回答

相关问题