Come mostrare il pulsante sul mouse del mouse div

Question

Voglio mostrare il pulsante su div hover. quando passo il mouse su div e il pulsante mostra altrimenti nascondi.

il mio pulsante in divbutton div.

html

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

quando muovere il mouse sulla div dovrebbe mostrare, ma come farlo non so. quando rimuovo di nuovo il pulsante del mouse. Grazie.

Answer 1

Utilizzare il seguente jQuery per eseguire l'attività.

Ecco la risposta di un jsfiddle demo

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

Answer 2

utilizzare il selettore di sotto

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

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

Demo

assicurarsi di assegnare alcuni height o min-height al vostro elemento div, altrimenti sarà 0 in quanto non detiene alcun contenuto anche. Inoltre, non utilizzare display: none; come stile in linea, poiché gli stili in linea hanno la massima specificità e, quindi, sarai costretto a utilizzare !important che non funziona.

Nell'esempio precedente sto utilizzando button {/*Styles*/} ma si tratta di un selettore di elementi generali, pertanto assicurati di definire un elemento nell'elemento button.

Answer 3

Mr. Alien dà un bel implementazione CSS. Se avete bisogno di jQuery, utilizzare questo -

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

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

Prova questo:

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

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