使用jQuery顯示和隱藏元素

Question

我目前正在為此：

<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的網站

我想要實現的是，當我將鼠標懸停在“ share It！”一詞上時，它將自動隱藏並顯示鏈接（在相同的確切位置）。 我已經在這里停留了一段時間，有人可以幫忙嗎？

Answer 1

在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;
}

JS

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

只是添加了fadeIn()以獲得不錯的淡入淡出效果，您也可以在其中使用.show() 。

JSfiddle 。

Answer 2

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

Answer 3

您需要在懸停時隱藏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>

Answer 4

這對您有用嗎？ 我認為它很簡單，很適合您

http://jsfiddle.net/mztcn/

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