java实现鼠标放上去就显示div
这是我写的java部分，下面是效果图
主要是鼠标放在左边文字就显示右边部分。左边部分我命名为div class=kcfl0，右边是div3，我想知道怎么用java实现鼠标放在左边文字上就显示右边部分。
可以参考一下这两段代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级菜单</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.menu {
width: 300px;
padding-top: 20px;
height: 800px;
box-shadow: 0 0 5px 2px #ccc;
}
.menu1 {
position: relative;
background-color: #E9EAEC;
}
.menu2 {
background-color: #F4F6F7;
}
.menu3 {
background-color: #fff;
}
.menu2, .menu3 {
display: none;
position: absolute;
top: 0;
left: 295px;
}
.menu .item {
cursor: pointer;
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.menu .tit {
display: flex;
justify-content: space-between;
}
.menu .arrow {
width: 20px;
height: 50px;
}
.menu1>.item, .menu2>.item {
border-top: 1px solid #bbb;
}
.menu1>.item:last-of-type, .menu2>.item:last-of-type {
border-bottom: 1px solid #bbb;
}
.menu1>.item:hover, .menu2>.item:hover {
background-color: #CFD3D8;
}
.menu3 {
padding-left: 20px;
padding-right: 20px;
}
.menu3 .item1 {
position: relative;
font-weight: bold;
border-bottom: 1px solid #bbb;
}
.menu3 .item1:before {
position: absolute;
top: 20px;
left: 0;
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background-color: skyblue;
}
</style>
<body>
<ul class="menu menu1">
<li class="item">
<div class="tit">
<span>解决方案</span>
<img class="arrow" src="./arrow.svg" alt="">
</div>
<ul class="menu menu2">
<li class="item">
<div class="tit">
<span>通用解决方案</span>
<img class="arrow" src="./arrow.svg" alt="">
</div>
<ul class="menu menu3">
<li class="item item1">网络安全</li>
<li class="item">DDoS防护</li>
<li class="item">云防火墙</li>
<li class="item">网络入侵防护系统</li>
<li class="item">样本智能分析平台</li>
<li class="item">高级威胁检测系统</li>
</ul>
</li>
<li class="item">
<div class="tit">
<span>行业解决方案</span>
</div>
</li>
<li class="item">
<div class="tit">
<span>云智大数据与AI</span>
</div>
</li>
<li class="item">
<div class="tit">
<span>区块链解决方案</span>
</div>
</li>
</ul>
</li>
</ul>
</body>
<script>
var menu1Items = document.querySelectorAll('.menu1>.item')
var menu2 = document.querySelector('.menu2')
var menu2Items = document.querySelectorAll('.menu2>.item')
var menu3 = document.querySelector('.menu3')
menu1Items[0].addEventListener('mouseenter', function() {
menu2.style.display = 'block'
})
menu1Items[0].addEventListener('mouseleave', function() {
menu2.style.display = 'none'
})
menu2Items[0].addEventListener('mouseenter', function() {
menu3.style.display = 'block'
})
menu2Items[0].addEventListener('mouseleave', function() {
menu3.style.display = 'none'
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三级菜单</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.menu {
padding-top: 20px;
width: 300px;
height: 800px;
box-shadow: 0 0 5px 2px #ccc;
}
.menu1 {
position: relative;
background-color: #E9EAEC;
}
.menu2 {
background-color: #F4F6F7;
}
.menu3 {
background-color: #fff;
}
.menu2, .menu3 {
display: none;
position: absolute;
top: 0;
left: 295px;
}
.menu2, .menu3 {
left: 300px;
}
.menu1>.item:hover .menu2 {
display: block;
}
.menu2>.item:hover .menu3 {
display: block;
}
.menu .item {
cursor: pointer;
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.menu1>.item, .menu2>.item {
border-top: 1px solid #bbb;
}
.menu1>.item:last-of-type, .menu2>.item:last-of-type {
border-bottom: 1px solid #bbb;
}
.menu .item:hover {
background-color: #CFD3D8;
}
.menu .tit {
display: flex;
justify-content: space-between;
}
.menu .arrow {
width: 20px;
height: 50px;
}
.menu3 {
padding-left: 20px;
padding-right: 20px;
}
.menu3 .item1 {
position: relative;
font-weight: bold;
border-bottom: 1px solid #bbb;
}
.menu3 .item1:before {
position: absolute;
top: 20px;
left: 0;
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background-color: skyblue;
}
</style>
<body>
<ul class="menu menu1">
<li class="item">
<div class="tit">
<span>解决方案</span>
<img class="arrow" src="./arrow.svg" alt="">
</div>
<ul class="menu menu2">
<li class="item">
<div class="tit">
<span>通用解决方案</span>
<img class="arrow" src="./arrow.svg" alt="">
</div>
<ul class="menu menu3">
<li class="item item1">网络安全</li>
<li class="item">DDoS防护</li>
<li class="item">云防火墙</li>
<li class="item">网络入侵防护系统</li>
<li class="item">样本智能分析平台</li>
<li class="item">高级威胁检测系统</li>
</ul>
</li>
<li class="item">
<div class="tit">
<span>行业解决方案</span>
</div>
</li>
<li class="item">
<div class="tit">
<span>云智大数据与AI</span>
</div>
</li>
<li class="item">
<div class="tit">
<span>区块链解决方案</span>
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>
运行结果在这里
js和css都可以实现。
你可以直接搜鼠标悬停按钮上改变按钮样式
你这只定义了函数，没给组件绑定事件啊
首先，这个叫javascript，也就是js，不是java
你的代码只是定义了两个函数而已，都没有绑定事件，怎么会触发呢？
确实，这个叫JavaScript，不是Java，还是有区别的哈！建议你可以把html部分的代码页贴出来，现在推测是你就定义了函数，没有在对应的html部分绑定触发事件
解决没