Im looing for a way to have a simple "on mouse over"-effect. (I want the page to show a dialogbox)
我正在寻找一种简单的“鼠标悬停”效果的方法。 (我希望页面显示一个对话框)
4 个解决方案
#1
Use some Javascript.
使用一些Javascript。
Jquery makes thoose things quite easy. Do you already have the information or is it something you want to pull from the server when the mouse is hovering?
Jquery让thoose很容易。您是否已经拥有这些信息,或者当鼠标悬停时您想从服务器中提取信息?
With Jquery you could do something like this
使用Jquery,你可以做这样的事情
<script type="javascript">
$(document).ready(
function(){
$("divToShow").hide();
$('#objectWithMouseOver').mouseover(onMouseOver());
});
function onMouseOver()
{
$('#divToShow').show();
}
</script>
<body>
<div id="divToShow">
whatever info you want to show....
</div>
<div id="objectWithMouseOver">
when you drag mouse over here the other will show
</div>
I would use addclass removeclass instead of show/hide to get better control. Its not hard to extend it to call mvc controls and populate data using ajax. Add some parameters to the function and the use jquery.ajax functions.
我会使用addclass removeclass而不是show / hide来获得更好的控制。不难扩展它来调用mvc控件并使用ajax填充数据。向函数添加一些参数并使用jquery.ajax函数。
#3
Adding to that jQuery is now being supported in intellisense by Microsoft so it's worth using with ASP.NET MVC Framework.
现在,微软在intellisense中支持添加到jQuery,因此值得使用ASP.NET MVC Framework。
#4
use css
Have a hidden div and a :hover on the word you wish to attach the popup to
有一个隐藏的div和a:将你想要附加弹出窗口的单词悬停在
You will need to have a helper JS script to load this in IE6
您需要有一个帮助程序JS脚本来在IE6中加载它
<span class="WordHighlight">word
<div class="hiddenPopup">some words about the word</div></span>
CSS
.WordHighlight{text-decoration:dotted}
.WordHighlight .hiddenPopup{display:none;/* add popup style */}
.WordHighlight:hover .hiddenPopup{display:inline;}
.WordHighlightHover .hiddenPopup{display:inline;}
add the script in a
在一个脚本中添加脚本
I will try to get back to finish this later
我会尽力回去完成这个
#1
Use some Javascript.
使用一些Javascript。
Jquery makes thoose things quite easy. Do you already have the information or is it something you want to pull from the server when the mouse is hovering?
Jquery让thoose很容易。您是否已经拥有这些信息,或者当鼠标悬停时您想从服务器中提取信息?
With Jquery you could do something like this
使用Jquery,你可以做这样的事情
<script type="javascript">
$(document).ready(
function(){
$("divToShow").hide();
$('#objectWithMouseOver').mouseover(onMouseOver());
});
function onMouseOver()
{
$('#divToShow').show();
}
</script>
<body>
<div id="divToShow">
whatever info you want to show....
</div>
<div id="objectWithMouseOver">
when you drag mouse over here the other will show
</div>
I would use addclass removeclass instead of show/hide to get better control. Its not hard to extend it to call mvc controls and populate data using ajax. Add some parameters to the function and the use jquery.ajax functions.
我会使用addclass removeclass而不是show / hide来获得更好的控制。不难扩展它来调用mvc控件并使用ajax填充数据。向函数添加一些参数并使用jquery.ajax函数。
#2
I'd go for the jQuery Tooltip plug-in from Jörn Zaefferer
我将从JörnZaefferer那里购买jQuery Tooltip插件
#3
Adding to that jQuery is now being supported in intellisense by Microsoft so it's worth using with ASP.NET MVC Framework.
现在,微软在intellisense中支持添加到jQuery,因此值得使用ASP.NET MVC Framework。
#4
use css
Have a hidden div and a :hover on the word you wish to attach the popup to
有一个隐藏的div和a:将你想要附加弹出窗口的单词悬停在
You will need to have a helper JS script to load this in IE6
您需要有一个帮助程序JS脚本来在IE6中加载它
<span class="WordHighlight">word
<div class="hiddenPopup">some words about the word</div></span>
CSS
.WordHighlight{text-decoration:dotted}
.WordHighlight .hiddenPopup{display:none;/* add popup style */}
.WordHighlight:hover .hiddenPopup{display:inline;}
.WordHighlightHover .hiddenPopup{display:inline;}
add the script in a
在一个脚本中添加脚本
I will try to get back to finish this later
我会尽力回去完成这个