javascript - 用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)
});
解决方案
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>
推荐阅读
- typescript - 为什么详尽检查对联合类型的工作方式不同?
- python - 类型错误:序列项 0:预期的 str 实例,找到段落
- sql - SQL - 对于任何给定的日期记录,选择之前记录的日期
- javascript - 将对象附加到 HTML
- r - 如何在每个节点中获取 SOM 图上的集群数?
- mysql - 我可以使用别名或常量作为 JSON_EXTRACT 函数的 JSON 键吗
- html - 将网站转换为不能在 Edge 上运行的 Progressive Web App (PWA)
- css - 有没有办法让 div 的高度设置为`overflow-y: auto`
- python - 将 Heroku 一次性测功机作为 `:detached` 运行会导致它消耗更多内存吗?
- php - 使用 PHP 打开文件的首选 fopen 模式是什么?