javascript - 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のようなものです

私が達成したいのは、「共有してください！」という言葉にカーソルを合わせると、リンクが自動的に非表示になり、リンクが表示されます（まったく同じ場所にあります）。私はしばらくここで立ち往生しています、誰か助けてくれますか?

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()。

JSフィドル。

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