Gewusst wie: ausführen einer javascript-Funktion, die bei einem "mouseover" über einem div

Wie kann ich eine Javascript-Funktion ausgeführt, wenn der Benutzer die Maus über ein div-tag?

Hier ist mein div-tag:

<div id="sub1 sub2 sub3">some text</div>
  • Die Anzeige "willkommen" - wo ? In einem popup-Fenster ein weiteres DIV-element ?
  • Nicht mit Leerzeichen in den IDs-break CSS?
  • im Div-tag itsef!
InformationsquelleAutor Hulk | 2010-01-05
  1. 25

    Ich nehme an, Sie wollen, um den Bildschirm " willkommen, wenn Sie mit der Maus über "text".

    Als message-box, diese werden sein:

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

    Als tooltip angezeigt, es sollte sein:

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

    Als ein neues div-Element, die Sie verwenden können:

    <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>

    Sollten Sie NIEMALS ein Leerzeichen enthalten, in der id eines Elements.

    • +1 für title Attribut..
    InformationsquelleAutor Nathan Wheeler
  2. 14

    Dies ist schlecht gebildet HTML. Sie müssen entweder eine einzelne id oder Leerzeichen getrennte Klassen. So oder so, wenn du neu bist würde ich schauen in jQuery.

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

    oder

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

    Wenn du den folgenden HTML-Code:

    <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

    würden Sie wahrscheinlich wollen, zählen Sie die Ereignisse auf Ihrer html:

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

    dann ist dein javascript hätte diese beiden Funktionen

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

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

    Bitte beachten Sie: dieses javascript nicht cross-browser-Probleme zu berücksichtigen. für diese brauchen Sie, um näher auf deinen code, nur ein weiterer Grund für die Verwendung von jquery.

    InformationsquelleAutor bendewey
  3. 1
     <div onmouseover='alert("welcome")' id="sub1 sub2 sub3">some text</div>

    Oder so etwas

    InformationsquelleAutor alemjerus
  4. 0

    Hier ein jQuery Lösung.

    <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>

    Mit diesem markup:

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

    Dir nicht wirklich geben, wenn (oder wenn) Sie verbergen wollte die Nachricht willkommen, aber das würde den Knebel zu verbergen oder zu zeigen, jedes mal, wenn Sie moused über den text.

    InformationsquelleAutor jjclarkson
  5. 0

    Mit dem title-Attribut:

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

    den Prototyp Weg

    <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>

    gehören Prototyp-Lib zum testen

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

    Hier ist, wie ich zeigen hover-text mit JavaScript-tooltip:

    <script language="JavaScript" type="text/javascript" src="javascript/wz_tooltip.js"></script>

<div class="curhand" onmouseover="this.T_WIDTH=125; return escape('Welcome')">Are you New Here?</div>
    InformationsquelleAutor Sooze
Schreibe einen Kommentar