显示和隐藏元素使用jQuery

问题描述：

<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"); 
});

http://jsfiddle.net/L9USt/3/

我想达到的目标是一样的东西的网站Mashable

我想实现的是当我悬停o n“分享它！”一词，它会自动隐藏并显示链接（在同一确切位置）。我在这里呆了一段时间，有人可以帮忙吗？

你需要隐藏在悬停BOX1，并显示在悬停了 – 2013-03-03 11:17:07

答

在你的HTML改变一点点，这是后话，你可能会发现有用。只需使用jQuery的.hover功能即可切换状态。

HTML

<div class="social"> 
    <h1>Share this</h1> 

    <div class="networks"> 
     <p>Twitter</p> 
     <p>Facebook</p> 
    </div> 
</div>

CSS

.networks { 
    display:none; 
}

$(".social").hover(function() { 
    $("h1", this).hide(); 
    $(".networks", this).fadeIn(); 
}, function() { 
    $(".networks", this).hide(); 
    $("h1", this).fadeIn(); 
});

的fadeIn()是只是添加了一个不错的衰落效果，你也可以在那里使用.show()。

JSfiddle。

哇！这是完全一样的东西！谢谢@MarcoK。谢谢你，谢谢你，谢谢你！ – 2013-03-03 11:22:43

答

你需要在悬停隐藏BOX1并显示在悬停了

$("#container").hover(function() { 
     $('#box1').hide(); 
     $('.box').show();  
    }, 
    function() { 
     $('.box').hide();  
     $('#box1').show(); 
    });

和你的HTML

<div id="box1"> 
<h1>Share it!</h1> 
</div>  

<div class="box" style="display:none"> 
<a href="#" class="bt btleft">Facebook Button here</a> 
<a href="#" class="bt btright">Twitter Button here</a> 
</div>

喜马尼什，感谢您的输入。不幸的是，如果我删除我的光标。 “分享它”文本丢失。它应该恢复到它。 – 2013-03-03 11:19:45

更新我的回答 – 2013-03-03 11:23:25

答

使用在父代中加载动态内容的html函数。样品：http://jsfiddle.net/slown1/TqGFQ/

这里是解决方案：

HTML：

<div id='container' style="border:1px solid red;"> 
    <h1>Share it!</h1> 
</div>

JS：

$("#container").hover(function() { 
    $("#container").html("<a href='#' "+ 
    "class='bt btleft'>"+"Facebook Button here</a><a href='#'" + 
    "class='bt btright'>Twitter Button here</a>'"); 
    }, 
     function() { 
      $("#container").html("<h1>Share it!</h1>"); 
     });

答

这是否对你的工作？我认为它简单，适合你

http://jsfiddle.net/mztcn/

$("#container").hover(function() { 
    $(".box").css("visibility", "visible"); 
}, function() { 
    $(".box").css("visibility", "hidden"); 
});

显示和隐藏元素使用jQuery

相关推荐