Wie man Knopf auf div Mausschwebeflug zeigt

Question

ich möchte Knopf auf div Hover zeigen. Wenn ich mit der Maus auf div tendiere dann die Schaltfläche show ansonsten ausblenden.

mein Knopf in divbutton Div.

html

<div class="divbutton"> 
    <button type="button" style="display: none;">Hello</button> 
</div> 

, wenn ich die Maus auf div schweben sollte es zeigt aber, wie zu tun, dass ich weiß nicht. Wenn ich die Maustaste wieder entferne, blende. Danke.

Answer 1

Verwenden Sie die folgende jQuery, um Ihre Aufgabe auszuführen.

Hier ist ein jsfiddle demo

$(document).ready(function() { 
    $(document).on('mouseenter', '.divbutton', function() { 
     $(this).find(":button").show(); 
    }).on('mouseleave', '.divbutton', function() { 
     $(this).find(":button").hide(); 
    }); 
}); 

Answer 2

Verwenden Sie den unten Selektor

button { 
    display: none; /* Hide button */ 
} 

.divbutton:hover button { 
    display: block; /* On :hover of div show button */ 
} 

Demo

auch sicherstellen, dass Sie einige height oder min-height zu Ihrem div Element zuweisen, sonst wird es 0 sein, da es keinen Inhalt halten. Verwenden Sie auch nicht display: none; als Inline-Stil, da Inline-Stile die höchste Spezifität aufweisen. Daher müssen Sie !important verwenden, was schlecht ist.

Im obigen Beispiel bin ich mit button {/*Styles*/} aber das ist ein allgemeiner Elementselektor, also stellen Sie sicher, dass Sie ein class zu Ihrem button Element definieren.

Answer 3

Mr. Alien Antwort eine schöne CSS-Implementierung gibt. Wenn Sie in jquery benötigen, verwenden Sie diese -

$(".divbutton") 
.on("mouseenter", function() { 
    $("button").show(); 
}) 
.on("mouseleave", function() { 
    $("button").hide(); 
}); 

In reinen JavaScript -

var buttonDiv = document.getElementsByClassName("divbutton")[0]; //better use some id and then use getElementById 

buttonDiv.onmouseover = function() { 
    document.getElementById("YourButtonId").style.display = 'block'; 
} 

buttonDiv.onmouseout = function() { 
    document.getElementById("YourButtonId").style.display = 'none'; 
} 

Answer 4

Versuchen Sie folgendes:

$('.divbutton').mouseover(function(event) 
{ 
    $(this).find('button').show(); 
}); 

$('.divbutton').mouseout(function(event) 
{ 
    $(this).find('button').hide(); 
});