我目前正在研究这个:
<div id='container'>
<div id="box1">
<h1>Share it!</h1>
</div>
<div class="box" style="visibility: hidden">
<a href="#" class="bt btleft">Facebook Button here</a>
<a href="#" class="bt btright">Twitter Button here</a>
</div>
</div>
$("#container").hover(function () {
$("#container div").css("visibility","visible");
},
function () {
$("#container div").css("visibility","hidden");
});
我想要实现的是网站Mashable之类的东西
我想要实现的是当我将鼠标悬停在“分享它!”这个词上时,它会自动隐藏和显示链接(在相同的确切位置)。我被困在这里有一段时间了,有人可以帮忙吗?
最佳答案
在您的 HTML 中稍作更改,您可能会发现这很有用。只需使用 .hover jQuery 切换状态的功能。
HTML
<div class="social">
<h1>Share this</h1>
<div class="networks">
<p>Twitter</p>
<p>Facebook</p>
</div>
</div>
CSS
.networks {
display:none;
}
JS
$(".social").hover(function() {
$("h1", this).hide();
$(".networks", this).fadeIn();
}, function() {
$(".networks", this).hide();
$("h1", this).fadeIn();
});
fadeIn()
只是为了一个漂亮的淡入淡出效果而添加的,你也可以在那里使用 .show()
。
JSfiddle .
关于javascript - 使用 jQuery 显示和隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15185054/