jQuery实现鼠标悬停功能,就像平时看各平台新闻时,鼠标划过标题栏出现的效果
js实现:https://blog.csdn.net/weixin_44657829/article/details/105716056
HTML实现(导航栏):https://blog.csdn.net/weixin_44657829/article/details/105326856
效果图如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.0.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
body {
background-color: #eeeeee;
}
.clearfix {
clear: both;
}
div.title {
margin-top: 100px;
margin-left: 300px;
}
div.title ul li {
float: left;
}
div.title ul li a {
display: block;
height: 30px;
line-height: 30px;
background-color: skyblue;
color: #ffffff;
padding: 5px 12px;
}
div.title ul li a:hover {
background-color: purple;
}
div.content {
margin-left: 300px;
background-color: #ffffff;
width: 240px;
}
div.content > div {
display: none;
}
div.content > div:first-child {
display: block;
}
</style>
</head>
<body>
<div class="title">
<ul>
<li><a class="title-content" href="#">Java</a></li>
<li><a class="title-content" href="#">C语言</a></li>
<li><a class="title-content" href="#">Python</a></li>
<li><a class="title-content" href="#">PHP</a></li>
<li><a class="title-content" href="#">Android</a></li>
</ul>
<div class="clearfix"></div>
</div>
<div id="content" class="content">
<div class="detail">
<ul>
<li><a>Java是一门优秀的语言</a></li>
</ul>
</div>
<div class="detail">
<ul>
<li><a>C语言是一门优秀的语言</a></li>
</ul>
</div>
<div class="detail">
<ul>
<li><a>Python是一门优秀的语言</a></li>
</ul>
</div>
<div class="detail">
<ul>
<li><a>PHP是一门优秀的语言</a></li>
</div>
<div class="detail">
<ul>
<li><a>Android是一门优秀的语言</a></li>
</div>
</div>
</body>
<script>
$('.title a').each(function(index) {
// 绑定mouseover(鼠标悬停)事件
$(this).mouseover(function() {
// hide() 是影藏的意思
$('#content > div').hide(); // style.display = 'none';
// show() 让其展示
$('#content > div:eq(' + index +')').show(); // style.display = 'block';
})
})
</script>
</html>