使用 jquery 制作两个锚标签

Question

我希望在鼠标进入时添加两个锚链接 #intro 并隐藏介绍，当鼠标离开时显示原始介绍。

$("#intro").on("mouseenter", function() {
  var link = $("<a>");
  var link2 = $("<a>");

  link.attr("href", "en.html");
  link2.attr("href", "fr.html");

  link.text("Welcome!");
  link2.text("Bienvenue!");

  $("#intro").addClass("link link2");
  $("#intro").html(link && link2);
});

$("#intro").on("mouseleave", function() {
  show(slow, this)
});

Answer 1

jQuery:

$(document).ready(function(){
  $("#intro").mouseover(function() {
    $(this).addClass("link link2");
    $("#intro a").show();
    $("#intro h1").hide();
  });
  
  $("#intro").mouseout(function() {
      $(this).removeClass("link link2");
    $("#intro a").hide();
    $("#intro h1").show();
  });
});

#intro {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 20px auto;
}

#intro a{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="intro">
  <h1>Intro</h1>
  <a href='en.html'>Welcome!</a>
  <a href='fr.html'>Bienvenue!</a>
</div>

CSS:

#intro {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#intro a,
#intro:hover h1{
  display:none;
}

#intro:hover a{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="intro">
  <h1>Intro</h1>
  <a href='en.html'>Welcome!</a>
  <a href='fr.html'>Bienvenue!</a>
</div>

使用 jquery 制作两个锚标签

making two anchor tags with jquery

javascript

anchor

jquery