当鼠标悬停在图像上时，在图像上显示关闭按钮 [英] show a close button over an image when mouse is hovering over it

问题描述

我无法弄清楚，我怎样才能完成以下操作：当鼠标悬停在图像上时，我需要在图像上显示一个关闭按钮。单击此按钮将删除图像。问题，当然，不是图像删除，而是如何在鼠标悬停的图像角落中显示关闭按钮？



图像在ImageButton控件中。



谢谢提前...

I cant figure out, how can i accomplish the following: i need to show a close button over an image when mouse is hovering over it. Clicking this button will delete the image. The problem, ofcourse, is not the image deletion, but how to show a close button in the image corner on mouse hover?

image is in ImageButton control.

Thanks Advance...

推荐答案

我认为你可以用CSS做到这一点。在有问题的图像上设置一个类（ASP：CssClass，我认为），在表示它的HTML元素下面附加一个div（你可能需要做一些hackery来完成这项工作，比如用JavaScript后拟合它，如果你无法访问您正在使用的控件的模板。设置CSS样式，如：

I think you can do this with CSS. Set a class (ASP: CssClass, I think) on the images in question, Attach a div underneath the HTML element that represents it (you might need to do some hackery to make that work, like post-fitting it with JavaScript, if you don't have access to a template for that control you're using). Set a CSS style like:

myImageButton div { display:none }
myImageButton:hover div { display:block }

或者，将JavaScript onMouseOver / onMouseOut处理程序放在您希望此行为的元素上。同样，你可以使用一个脚本来查看CSS类的元素，以便在加载时附加这些处理程序。



您可能要考虑编写一个自定义控件来封装这个行为。这样你就可以完全控制标记，可能更容易看到发生了什么。

Alternatively, put JavaScript onMouseOver/onMouseOut handlers on the elements you want this behaviour on. Again, you can use a script that looks elements up by CSS class to attach those handlers at load time.

You may want to consider writing a custom control to encapsulate this behaviour. That way you can have full control over the markup and it might be easier to see what's going on.

这篇关于当鼠标悬停在图像上时，在图像上显示关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！