div माउस होवर पर बटन कैसे दिखाएं

Question

मैं div होवर पर बटन दिखाना चाहता हूं। जब मैं div पर माउस होवर करता हूं तो बटन अन्यथा छुपाएं दिखाएं।

divbutton div में मेरा बटन।

एचटीएमएल

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

जब मैं div पर माउस होवर यह दिखाना चाहिए लेकिन कैसे है कि मैं नहीं जानता कि क्या करना है। जब मैं माउस बटन को फिर से छुपाता हूं तो छुपाएं। धन्यवाद।

Answer 1

अपना कार्य करने के लिए निम्न jQuery का उपयोग करें।

यहाँ एक jsfiddle demo

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

Answer 2

उपयोग नीचे दिए गए चयनकर्ता

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

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

Demo

यह भी सुनिश्चित करें कि आप अपने div तत्व करने के लिए कुछ height या min-height असाइन करें, वरना यह 0 हो जाएगा के रूप में यह किसी भी सामग्री को पकड़ नहीं करता है। साथ ही, इनलाइन शैली के रूप में display: none; का उपयोग न करें, क्योंकि इनलाइन शैलियों में उच्चतम विशिष्टता है, और इसलिए, आपको !important का उपयोग करने के लिए मजबूर होना होगा जो खराब है।

उपर्युक्त उदाहरण में button {/*Styles*/} का उपयोग कर रहा हूं लेकिन यह एक सामान्य तत्व चयनकर्ता है, इसलिए सुनिश्चित करें कि आप अपने button तत्व पर class परिभाषित करें।

Answer 3

श्री विदेशी का जवाब एक अच्छा सीएसएस कार्यान्वयन देता है। आप jQuery में की जरूरत है, इस का उपयोग करें -

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

शुद्ध जावास्क्रिप्ट में -

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

आज़माएं:

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

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