[英]How can I open a small window when the user hovers over some text?
I am preparing a web page with more data that can possibly be shown without making the page really cumbersome. 我正在准备一个包含更多数据的网页,而这些数据可以在不使页面真正繁琐的情况下显示出来。 I am considering different way to do this.
我正在考虑以其他方式来执行此操作。 One way would be to have the extra data magically appear on a small window when the user hovers over a particular part of text.Yahoo!
一种方法是当用户将鼠标悬停在文本的特定部分上时,使多余的数据神奇地显示在一个小窗口上。 Answers does something like that when you hover over a user.
当您将鼠标悬停在用户上方时,Answers会执行类似的操作。 But I suppose that must be way to complex to code (for my level).
但是我想这一定是一种复杂的编码方式(就我的水平而言)。
SO I am looking for a simple way to get a small pop up window to appear next to the mouse pointer when the user hovers on a particularly interesting text. 因此,我正在寻找一种简单的方法来使用户悬停在特别有趣的文本上时,在鼠标指针旁边显示一个小的弹出窗口。 The window should disappear automatically once the user leaves the text.
用户离开文本后,该窗口应会自动消失。 On this topic I have a few questions:
关于这个主题,我有几个问题:
Just use a DIV to show your text, to open a completely new window is overkill and seeing as most people have popup blockers in their browsers, the window won't even show. 只需使用DIV来显示您的文本,打开一个全新的窗口就显得有些矫kill过正,并且由于大多数人在浏览器中都拥有弹出窗口阻止程序,因此该窗口甚至不会显示。 I suggest using JQuery (nice to start with if you are new as it will make your Javascript development WAY easier) and the JQuery Tooltip plugin found here
我建议使用JQuery(如果您是新手,则可以从这里开始,因为它会使您的Java开发更加容易),并且建议您在此处找到JQuery Tooltip插件
The prettiest solution would probably be using jQuery and the jQuery tooltip plugin, as mentioned above. 最漂亮的解决方案可能是使用jQuery和jQuery工具提示插件,如上所述。 If you are really keen on avoiding javascript, you can reach this goal with just the use of css:
如果您真的很想避免使用javascript,则可以通过使用CSS来达到此目标:
<div id="bigdiv">
bla
<div id="tooltip">this is a bla</div>
</div>
#tooltip{
display:none;
}
#bigdiv:hover #tooltip{
display:block;
}
Ya this can be done using javascript. 是的,这可以使用javascript完成。
You have to write events for mouseover and mouseout of the text element. 您必须为文本元素的鼠标悬停和鼠标移出编写事件。 Create a div with some styling applied and show the text inside the element as the div's innerText.
创建一个应用了某些样式的div,并将元素内部的文本显示为div的innerText。 Set the position of the div according to the text element.
根据文本元素设置div的位置。
You could also use the Yahoo! 您也可以使用Yahoo! User Interface (YUI) library which is similar to jQuery.
用户界面(YUI)库与jQuery类似。 In fact this is very likely going to be what they used on the Yahoo!
实际上,这很有可能就是他们在Yahoo!上使用的内容。 Answers site.
答案站点。
Take a look at their very useful site. 看看他们非常有用的网站。 http://developer.yahoo.com/yui/container/overlay/
http://developer.yahoo.com/yui/container/overlay/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.