在元素悬停上用javascript显示网站

我想在html页面中有一个动态的弹出窗口。弹出窗口将在用户悬停单词时出现。并在弹出窗口中，我想调用一个网页与悬停词作为参数。它不需要处理页面中的每个单词。只有悬停在我选择的单词上才能像那样工作。例如我在我的html页面中有一个文本“你好，这是一个示例文本”，并且用户将鼠标悬停在单词“sample”上，弹出窗口将出现，并且在弹出窗口中，我将显示以下页面“www.blabla。 com /？word = sample“在元素悬停上用javascript显示网站

希望我清楚。我希望它能够在静态页面上工作。我对JavaScript很陌生。我甚至不知道从哪里开始，所以任何帮助将不胜感激。谢谢。

编辑：我希望弹出窗口是模式弹出。

来源

2012-09-03 Ozgur Dogus

首先学习HTML和Javascript以及如何事件在DOM工作。我会给你一个提示：你可以在弹出窗口中使用一个'iframe'。 – Robusto

我很担心，由于浏览器阻止，弹出式窗口不会在鼠标悬停时打开。你将不得不让用户点击它才能工作。另一种方法是创建一个带有iframe的“伪弹出窗口”（绝对div位置），就像@Robusto暗示的那样 –

这是非常基本的，请继续阅读http://www.tizag.com/javascriptT/javascriptevents.php和http://www.w3schools.com/jsref/met_win_open.asp

教程，但我可以告诉你，与这种方法的，浏览器会触发他们的弹出式窗口拦截。

来源

2012-09-03 12:08:36

获取你想要产生这种效果的元素，遍历它们，向它们中的每一个添加事件侦听器，这些事件侦听器弹出一个窗口。

这是这样的事情，在那里的话有类popup周围原油实现：

[].slice.apply(document.getElementsByClassName('popup')).forEach(function (elem){ 
    elem.addEventListener('mouseover', function(){ 
     window.open('http://google.com/?q=' + this.innerHTML); 
    }, false); 
});

Demo

来源

2012-09-03 12:08:56

在元素悬停上用javascript显示网站

回答

相关问题