wake-up-neo.com

Verwenden von onmouseover zum Anzeigen von QuickInfos in Javascript

Ich versuche, Javascript zu verwenden, um kleine Dialogfelder zu erstellen, die den Benutzer darauf hinweisen, wie er Daten in ein Feld eingeben muss, wenn er über sie schwebt. Ich bin extrem neu in der Verwendung von Javascript, daher könnte ich völlig falsch herumlaufen. Unten ist mein Code:

HTML

        <html>
            <body>

            <div>
            <button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
            </div>

            <script>
            function mOver(obj)
            {
            obj.innerHTML="<div id='help_container'><button id='close'>X</button><p id='help_text'>Help Text</p></div>"
            }

            function mOut(obj)
            {
            obj.innerHTML="<button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'>?</button>"
            }
            </script>
            </script>
         </body>


        <style type="text/css">
            #button  {
                border-radius: 50%;
                border: 1px solid black;
                padding-top: 3px;
                padding-bottom: 3px;
            }
            #info   {
                margin-left: 5%;
            }
            #help_container {
                border: 0.5px solid black;
                background-color: #efefef;
                width: 20%;
            }
            #close  {
                float: right;
                margin-top: 1%;
                background-color: #efefef;
                border: 0px solid #efefef;
            }
            #help_text  {
                margin: 5%;
                font-family: Arial;
                font-size: 15px;
            }
        </style> 
</html>

Die Funktion funktioniert jedoch nicht, Änderungen treten jedoch ein, wenn Sie den button-Tag über und weg bewegen, nicht jedoch die erwarteten Änderungen. Ich hatte gehofft, dass eine kleine div mit Hilfetext darin erscheinen würde. Im Idealfall möchte ich auch, dass in der Variablen div eine Schaltfläche zum Schließen angezeigt wird, die eine Funktion onclick aufrufen und div entfernen kann. Ich bin jedoch nicht sicher, wie Elemente mit der Methode onlick entfernt werden. Jede Hilfe zum Lösen der onmouseover-Funktion oder zum Implementieren einer Methode zum Schließen der div mit onlick wäre sehr dankbar. Vielen Dank im Voraus

7
user3298004

Sie können bootstrap oder andere Javascript-Bibliotheken zusammen mit jQuery für denselben Zweck verwenden. Es ist besser, sie zu benutzen. Bitte schauen Sie sich an,

HTML

    <a data-toggle="tooltip" title="add to cart">
        <i class="icon-shopping-cart"></i>
    </a>

Skript  

    $('a[data-toggle="tooltip"]').tooltip({
         animated: 'fade',
         placement: 'bottom',
     });

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
});
.cart {
    overflow:hidden;
    padding:10px 3px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div class="cart"> 
    <a data-toggle="tooltip" title="add to cart">
        <i class="icon-shopping-cart"> Cart</i>
    </a>
</div>

7
Robin C Samuel

Sie können nur CSS und HTML verwenden.

CSS:

<style type="text/css">
            div#tooltip a span {display: none;}
            div#tooltip a:hover span {display: block;
               position: relative; width: 125px;
               padding: 5px; margin: 10px; z-index: 100;
               color: black; background-color:#FFFFCC; border: 1px solid #ccc;
               font: 10px Verdana, sans-serif; text-align: center;}

            div#tooltip a {
              position:relative;
            }
            div#tooltip a span {
              display:none;
            }
            div#tooltip a:hover span {
              display:block;
              position:absolute; width: 100px;
              color: black; background-color:#FFFFCC; border: 1px solid #ccc;
              font: 10px Verdana, sans-serif; text-align: center;
            }
            div#tooltip a:hover {text-indent:0;}
            #tooltip button { border-radius: 50%;
                border: 1px solid black;
                padding-top: 3px; }
</style>

HTML:  

<div id="tooltip">
            <a href=""><button id="button" >?</button>
                <span>This is an example of some hover text!</span>
            </a>
</div>
4
Vitthal

mit ihrem code arbeiten sie mit button, nicht div. Um auf div mit innerHTML Einfluss zu nehmen, brauchst du etwa Folgendes:

<div id="my_div">
<button id="button" onmouseover="javascript:mOver('my_div');" onmouseout="javascript:mOut('my_div');">?</button>
</div>

damit die X-Taste funktioniert, verwenden Sie Folgendes:

<button onclick="javascript:mOut('my_div');">X</button>
1
cyborg86pl

Ich glaube nicht, dass Ihre Js-Funktion irgendetwas falsch ist, aber Ihre HTML-Struktur ist wirklich durcheinander. Ich habe die Struktur Ihres HTML-Codes geändert und erkenne die Funktion mit dem gleichen Code, den Sie bereitstellen.

<html>
    <head>
    <style type="text/css">
    #button  {
        border-radius: 50%;
        border: 1px solid black;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    #info   {
        margin-left: 5%;
    }
    #help_container {
        border: 0.5px solid black;
        background-color: #efefef;
        width: 20%;
    }
    #close  {
        float: right;
        margin-top: 1%;
        background-color: #efefef;
        border: 0px solid #efefef;
    }
    #help_text  {
        margin: 5%;
        font-family: Arial;
        font-size: 15px;
    }
    </style>
    <script>
        function mOver(obj)
        {
        obj.innerHTML="<div id='help_container'><button id='close'>X</button><p id='help_text'>Help Text</p></div>"
        }

        function mOut(obj)
        {
        obj.innerHTML="<button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'>?</button>"
        }
    </script>
    </head>
    <body>
    <div>
    <button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
    </div>
    </body>
</html>
1
Fred Wu