Javascript 使用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>

我想要实现的是类似于网站的东西

---

我想实现的是，当我将鼠标悬停在“共享它！”这个词上时，它会自动隐藏和显示链接（在同一个确切位置）。我被困在这里有一段时间了，有人能帮忙吗？

你需要在悬停时隐藏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>

分享吧！

在HTML中稍作更改，您可能会发现这很有用。只需使用jQuery的功能切换状态

HTML

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

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

JS

.networks {
    display:none;
}

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

刚刚添加了

fadeIn（）

以获得良好的淡入淡出效果，您也可以在那里使用

.show（）

---

.

使用html函数动态加载父级中的内容。 样本：

以下是解决方案：

HTML:

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

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

分享吧！

JS:

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

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

$（“#容器”）.hover（函数（）{
$（“#容器”）.html（“'）；
},
函数（）{
$（“#container”）.html（“共享它！”）；
});

这对你有用吗？我认为这很简单，对你有用

---

您需要在悬停时隐藏box1并在悬停时显示outhi manish，谢谢您的输入。不幸的是，如果我删除光标。缺少“共享”文本。它应该恢复到原来的状态。哇！这是完全一样的事情！谢谢你，马可。谢谢谢谢谢谢!！