在鼠标悬停时加载内容

问题描述：

我想在div上的图标的鼠标悬停时加载div的内容.此外，将鼠标悬停只应触发一次，并且最好在加载内容后将图标消失.

I want to load the content of a div on the mouseover of an icon within the div. Furthermore, the mouseover should only fire once and preferably the icon should disappear after loading the content.

将在de div中加载的内容将是带有社交媒体按钮的外部文件.如果您想知道的话；我不希望他们在页面的其余部分加载内容，因为它们会使速度变慢.另外，某些访问者可能对使用FB和G +跟踪其互联网移动情况的网站感到不满意.

The content that will be loaded in de div will be an external file with social media buttons. In case you are wondering; I don't want them to load with the rest of the page because they slow it down. Also, some visitors might not be comfortable with sites like FB and G+ tracking their internet movement.

所以，我收集了一些代码并复制了一些粘贴内容，这就是我想到的:

So, I have gathered some code and copy pasted a bit and this is what I came up with:

<div id="social_media">

<img src="icon.png" onmouseover="javascript:$('#social_media').load('external_file.php'); this.onmouseover=null;" alt="Show Social Media Buttons!" />

</div>

问题是，它工作得非常好:)但是由于这是我从3个不同的来源获得并粘贴在一起的代码，所以我的问题是它是否有用?例如，我从未尝试过找到一种方法来将鼠标悬停在图标上，只是这样做了:)

The thing is, it works perfectly fine :) But since it is code that I got from 3 different sources and pasted together, my question is if it's any good? For example, I never tried to find a way to remove the icon on mouseover, it just did :)

我几乎没有编码Javscript/jQuery的经验，所以请告诉我您的想法，以便我可以从中学习！

I have almost no experience in coding Javscript/jQuery, so please let me know what you think about it so that I can learn from it!

阿姆斯特丹的感谢和问候！

Thanks and greetings from Amsterdam!

答

避免尝试内联代码

<div id="social_media">

<img src="icon.png"  alt="Show Social Media Buttons!" />

</div>

将mouseenter事件处理程序附加到img

attach a mouseenter event handler to the img

$(function(){// short cut of $(document).ready(); read more on google
    $("#social_media>img").bind({
        mouseenter:function(e){
         $('#social_media').load('external_file.php');
        }
    });
});

P.S选择器没有经过优化，也不是这段代码的结果只是为了给您一个想法

P.S the selectors are not optimized nor the outcome of this code it was just to give you an idea

演示

相关推荐