java实现鼠标放上去就显示div

这是我写的java部分，下面是效果图

主要是鼠标放在左边文字就显示右边部分。左边部分我命名为div class=kcfl0，右边是div3，我想知道怎么用java实现鼠标放在左边文字上就显示右边部分。

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

6条回答默认最新

坚持不懈的大白优质创作者: 前端开发技术领域 2022-05-11 14:20

关注

可以参考一下这两段代码


<!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>