文章目录
- CSS+JS 折叠效果
- CSS+jQuery 鼠标经过显示详细信息
CSS+JS 折叠效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折叠效果</title>
<style type="text/css">
.collapse-box {
width: 500px;
border: 1px solid silver;
border-radius: 4px;
margin: auto;
}
.collapse-title {
height: 60px;
line-height: 60px;
font-size: 30px;
text-align: center;
color: black;
background-color: #DDD;
cursor: pointer;
}
.collapse-content {
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: #666;
height: 0;
overflow: hidden;
transition: all 0.3s;
}
.collapse-content.show {
height: 200px
}
</style>
</head>
<body>
<div class="collapse-box">
<div class="collapse-title">折叠标题</div>
<div class="collapse-content">折叠内容 折叠内容 折叠内容</div>
</div>
<script type="text/javascript">
let title = document.querySelector(".collapse-title");
let content = document.querySelector(".collapse-content");
title.onclick = function() {
content.classList.toggle("show");
};
</script>
</body>
</html>
CSS+jQuery 鼠标经过显示详细信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
h3 {
height: 40px;
line-height: 40px;
text-align: center;
background-color: #ddd;
cursor: pointer;
}
div {
display: none;
padding: 10px;
border: 1px solid silver;
text-indent: 32px;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function() {
$("h3").hover(function() {
$("div").css("display", "block");
}, function() {
$("div").css("display", "none");
});
})
</script>
</head>
<body>
<h3>hello world</h3>
<div>
这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。这是一些内容。
</div>
</body>
</html>
