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