web-dev-qa-db-fra.com

Comment exécuter une fonction javascript lors d'un survol de souris sur un div

Comment puis-je exécuter une fonction Javascript lorsque l'utilisateur passe la souris sur une balise div?

Voici ma balise div:

<div id="sub1 sub2 sub3">some text</div>
htmlonmouseover
11
Hulk

Je suppose que vous souhaitez afficher l'accueil lorsque vous passez la souris sur "du texte".

En tant que boîte de message, ce sera:

<div id="sub1" onmouseover="javascript:alert('Welcome!');">some text</div>

En tant qu'info-bulle, elle devrait être:

<div id="sub1" title="Welcome!">some text</div>

En tant que nouveau div, vous pouvez utiliser:

<div id="sub1" onmouseover="javascript:var mydiv = document.createElement('div'); mydiv.height = 100; mydiv.width = 100; mydiv.zindex = 1000; mydiv.innerHTML = 'Welcome!'; mydiv.position = 'absolute'; mydiv.top = 0; mydiv.left = 0;">some text</div>

Vous ne devez JAMAIS contenir d'espaces dans le id d'un élément.

26
Nathan Wheeler

C'est du HTML mal formé. Vous devez avoir un identifiant unique ou des classes séparées par des espaces. Quoi qu'il en soit, si vous êtes nouveau, je chercherais dans jQuery.

<div id="sub1">some text</div>

ou

<div class="sub1 sub2 sub3">some text</div>

Si vous aviez le code HTML suivant:

<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Some welcome message</div>

jQuery

$(document).ready(function() {
    $('#sub1').hover(
      function() { $('#welcome').show(); },
      function() { $('#welcome').hide(); }
    );
});

Javascript

vous voudrez probablement inclure les événements dans votre html:

<div id="sub1" onmouseover="showWelcome();" onmouseout="hideWelcome();">some text</div>

alors votre javascript aurait ces deux fonctions

function showWelcome()
{
   var welcome = document.getElementById('welcome');
   welcome.style.display = 'block';
}

function hideWelcome()
{
   var welcome = document.getElementById('welcome');
   welcome.style.display = 'none';
}

Remarque: ce javascript ne prend pas en compte les problèmes de navigation croisée. pour cela, vous devez développer votre code, juste une autre raison d'utiliser jquery.

15
bendewey
 <div onmouseover='alert("welcome")' id="sub1 sub2 sub3">some text</div>

Ou quelque chose comme ça

1
alemjerus

Voici une solution jQuery .

<script type="text/javascript" src="/path/to/your/copy/of/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#sub1").mouseover(function() {
        $("#welcome").toggle();
    });
});
</script>

Utilisation de ce balisage:

<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Welcome message</div>

Vous n'avez pas vraiment spécifié si (ou quand) vous vouliez masquer le message de bienvenue, mais cela basculerait masquer ou afficher chaque fois que vous passez la souris sur le texte.

0
jjclarkson

En utilisant l'attribut title:

<div id="sub1 sub2 sub3" title="some text on mouse over">some text</div>
0
marcgg

la manière prototype

<div id="sub1" title="some text on mouse over">some text</div>


<script type="text/javascript">//<![CDATA[
  $("sub1").observe("mouseover", function() {
    alert(this.readAttribute("title"));
  });
//]]></script>

inclure Prototype Lib pour les tests

<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
0
Burntime