用 jquery 制作两个锚标签

阿夫拉

我希望在鼠标进入#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)
});
001

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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章