[英]How to show button on div mouse hover
i want to show button on div hover.我想在 div 悬停时显示按钮。 when i hover mouse on div then button show otherwise hide.
当我将鼠标悬停在 div 上时,按钮显示否则隐藏。
my button in divbutton
div.我在
divbutton
div 中的按钮。
html html
<div class="divbutton">
<button type="button" style="display: none;">Hello</button>
</div>
when I hover mouse on div it should show but how to do that i do not know.当我将鼠标悬停在 div 上时,它应该显示,但我不知道该怎么做。 when I remove mouse button again hide.
当我再次删除鼠标按钮时隐藏。 Thank you.
谢谢。
Use the below selector使用下面的选择器
button {
display: none; /* Hide button */
}
.divbutton:hover button {
display: block; /* On :hover of div show button */
}
Also make sure you assign some height
or min-height
to your div
element, else it will be 0
as it doesn't hold any content.还要确保为
div
元素分配一些height
或min-height
,否则它将为0
因为它不包含任何内容。 Also, don't use display: none;
另外,不要使用
display: none;
as inline style, as inline styles have highest specificity, and hence, you will be forced to use !important
which is bad.作为内联样式,因为内联样式具有最高的特异性,因此,您将被迫使用
!important
,这是不好的。
In the above example am using button {/*Styles*/}
but that is a general element selector, so make sure you define a class
to your button
element.在上面的示例中,我使用了
button {/*Styles*/}
但这是一个通用的元素选择器,因此请确保为button
元素定义一个class
。
Use following jQuery to perform your task.使用以下 jQuery 来执行您的任务。
Here is a jsfiddle demo这是一个jsfiddle演示
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});
Mr. Alien's answer gives a nice CSS implementation. Alien 先生的回答提供了一个很好的 CSS 实现。 If you need in jquery, use this -
如果你需要在 jquery 中,使用这个 -
$( ".divbutton" )
.on("mouseenter", function() {
$("button").show();
})
.on("mouseleave", function() {
$("button").hide();
});
In pure JavaScript -在纯 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';
}
Try this:试试这个:
$('.divbutton').mouseover(function(event)
{
$(this).find('button').show();
});
$('.divbutton').mouseout(function(event)
{
$(this).find('button').hide();
});
first hide the button with transform property.首先隐藏具有转换属性的按钮。
button{
transform:translate(100%,100%)
//this will move the button right and buttom
}
then when you hover on div, you bring it back然后当你悬停在 div 上时,你把它带回来
.divbutton:hover button{
//class name should have been divButton
transform:translate(0,0)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.