顯示和隱藏元素使用jQuery

我目前在做這個：顯示和隱藏元素使用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「分享它！」一詞，它會自動隱藏並顯示鏈接（在同一確切位置）。我在這裏呆了一段時間，有人可以幫忙嗎？

來源

2013-03-03 Kareen Lagasca

你需要隱藏在懸停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。

來源

2013-03-03 11:20:27 MarcoK

哇！這是完全一樣的東西！謝謝@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:17:20

喜馬尼什，感謝您的輸入。不幸的是，如果我刪除我的光標。「分享它」文本丟失。它應該恢復到它。 – 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>"); 
     });

來源

2013-03-03 11:29:23

這是否對你的工作？我認爲它簡單，適合你

http://jsfiddle.net/mztcn/

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

來源

2013-03-03 14:02:59 brykneval

顯示和隱藏元素使用jQuery

回答

相關問題