jQuery 当 div 设置为不显示时，如何在鼠标悬停时显示 /hide div，在 gridview 项目模板中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9372665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to show /hide div on mouseover when div set to display none, in gridview item template
提问by Ravi Gadag
box div will be hidden during pageload, when we hover on it it should display, onmouseover it should display, and onmouseout it should be hidden. can any body suggest me how to do in jquery, i am beginner in Jquery :)
box div 将在页面加载期间隐藏，当我们将鼠标悬停在它上面时，它应该显示，onmouseover 应该显示，而 onmouseout 应该隐藏。任何人都可以建议我如何使用 jquery，我是 Jquery 的初学者:)
Update this Div is placed in ItemTemplate of gridview. will it be worked ? with answeered which you people provide ?
更新这个 Div 放在 gridview 的 ItemTemplate 中。它会起作用吗？你们提供的答案是什么？
<div id="box" style="display: none">
<a href="#" class="bt btleft">Highlight it</a>
<a href="#" class="bt btright">Reset</a>
</div>
回答by Jaspreet Chahal
you are better off using visible property in CSS rather than display:none to start with because display:none will sort of remove the space of the container itself.
你最好在 CSS 中使用可见属性而不是 display:none ，因为 display:none 会移除容器本身的空间。
try this out
试试这个
Your HTML should look like this
你的 HTML 应该是这样的
<div id='container'>
<div id="box" style="visibility: hidden">
<a href="#" class="bt btleft">Highlight it</a>
<a href="#" class="bt btright">Reset</a>
</div>
</div>?
You jquery will look like this
你的jQuery看起来像这样
$("#container").hover(function () {
$("#container div").css("visibility","visible");
},
function () {
$("#container div").css("visibility","hidden");
});?
Hope this helps
希望这可以帮助
回答by Akhil Thayyil
Try this, the simplest one..
试试这个，最简单的..
$("#box").hover(function()
{
$(this).show();
},
function()
{
$(this).hide();
});
回答by JIA
modify the html a bit like
修改html有点像
<div id="hover">hover</div>
<div id="box" style="display: none">
<a href="#" class="bt btleft">Highlight it</a>
<a href="#" class="bt btright">Reset</a>
</div>
jquery part
jQuery部分
$("#hover").hover(function(){
$("#box").slideDown();
},function(){
$("#box").slideUp();
});
回答by Shaheer
wrap it in another div and bind a mouseover event on that div
将其包装在另一个 div 中并在该 div 上绑定鼠标悬停事件
<div id='parent-wrapper'>
<div id="box" style="display: none">
<a href="#" class="bt btleft">Highlight it</a>
<a href="#" class="bt btright">Reset</a>
</div>
</div>
$('#parent-wrapper')
.mouseover(
function() {
$('#box').show();
}
);
回答by Kanishka Panamaldeniya
Wrap the divwith another divand add the code to that wrapped div:
div用另一个包装div并将代码添加到包装中div：
$('#wrapper').bind('mouseover hover', function(){
$('#box').show();
});
$('#wrapper').mouseout(funcion(){
$('#box').hide();
});
