CSS实现鼠标hover展开菜单

效果图：

HTML源码： 背景图地址需要更改

<!-- 软件介绍 -->
<div class="software-box">
  <div class="software-container">
  <div class="software-title">
  <h2>&ldquo; 一个软件搞定所有 &rdquo;</h2>
  <div class="software-menu-box">
  <div class="software-menu">
  <ul id="softmenu-ul">
  <li class="curr">
  <h4>营销中心</h4>
  <p>帮助您开发潜在客户并实现营销自动化。</p>
  <a href="#"><button>营销</button></a></li>
  <li>
  <h4>开发中心</h4>
  <p>系统推荐、挖掘潜在客户，维度搜索潜在客源详细信息和联系方式。</p>
  <a href="#"><button>探索</button></a></li>
  <li>
  <h4>管理中心</h4>
  <p>营销一体化，从线索到成单，全程数智化跟踪，实现商机闭环，赋能营销、决策，提升效率与价值。</p>
  <a href="#"><button>CRM</button></a></li>
  <li>
  <h4>独立站</h4>
  <p>快速搭建企业全球店铺，提升您的国际形象。</p>
  <a href="#"><button>SHOP</button></a></li>
  <li>
  <h4>运营中心</h4>
  <p>一体化、人工智能内容营销软件，帮助营销人员创建和管理内容。</p>
  <a href="#"><button>AI</button></a></li>
  <li>
  <h4>增值服务</h4>
  <p>帮助出海企业直接与目标客户建联，精准开发客户。</p>
  <a href="#"><button>更多</button> </a></li>
  </ul>
  </div>
  </div>
  </div>
  </div>
  <style>
   /* 软件介绍 */
      .software-box{
        width: 100%;
        /* background-color: #F9F9F9; */
      }
      .software-container{
        max-width: 1440px;
        padding: 20px 0;
        margin: auto;
      }
      .software-title h2{
        font-size: 32px;
        padding: 20px 0 0;
        text-align: center;
      }
      .software-menu-box{
        width: 100%;
        margin: auto;
      }
      .software-menu{
        width: 100%;
      }
      .software-menu ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
      }
      .software-menu ul li{
        width: 12%;
        height: 120px;
        margin-right: 10px;
        margin-bottom: 35px;
        text-align: center;
        box-shadow: 0px 5px 10px 0px rgb(187, 187, 187);
        transition: all 0.5s ease;
        /* background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%); */
      }
      .curr{
        width: 30% !important;
        display: flex;
        background-image: linear-gradient(to right, #ffffff 0%, #4095e5 100%);
      }
      .currh4{
        width: 30% !important;
        background-size: 80% !important;
        border-right: 1px solid #c3c3c3;
        border-radius: 30px;
        box-shadow: 10px 0px 10px #4095e5;
      }
      .software-menu ul li:nth-child(1) h4{
        background: url(img.png)no-repeat;
        background-size: 55%;
        background-position: bottom;
      }
      .software-menu ul li:nth-child(2) h4{
        background: url(img.png) no-repeat;
        background-size: 55%;
        background-position: bottom;
      }
      .software-menu ul li:nth-child(3) h4{
        background: url(img.png) no-repeat;
        background-size: 55%;
        background-position: bottom;
      }
      .software-menu ul li:nth-child(4) h4{
        background: url(img.png) no-repeat;
        background-size: 55%;
        background-position: bottom;
      }
      .software-menu ul li:nth-child(5) h4{
        background: url(img.png) no-repeat;
        background-size: 55%;
        background-position: bottom;
      }
      .software-menu ul li:nth-child(6) h4{
        background: url(img.png) no-repeat;
        background-size: 55%;
        background-position: bottom;
      }
    
    
      /* 添加动画 */
      .software-menu ul li{
          border-radius: 20px;
          /* background: linear-gradient(to right, transparent 0%, transparent 100%); */
          position: relative;
          overflow: hidden;
      }
      .software-menu ul li::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, transparent 0%, #4095E5 100%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s;
            z-index: 0;
        }
        .software-menu ul li:hover::before {
            transform: scaleX(1);
        }
        .software-menu ul li:hover{
            /* transform: scale(1.05); */
            color: #ffffff;
            /* font-weight: 700; */
            /* background: linear-gradient(to right, transparent 0%, #4095E5 100%); */
        }
        .software-menu ul li * {
            position: relative;
            z-index: 1;
        }
      .software-menu ul li h4{
        padding: 10px 0 0;
        width: 100%;
        height: 100%;
        color: #000000;
        background-size: 55%;
        background-position: bottom;
        margin: 0px;
        font-weight: 700;
      }
      .software-menu ul li p{
        padding: 20px 10px;
        width: 80%;
      }
      .software-menu ul li button{
        /* width: 50%; */
        height: 100%;
        margin-bottom: 20px;
        background-color: #4095E5;
        border: none;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
        transition: all 0.5s;
      }
      .software-menu ul li button:hover{
        background-color: #BD3124;
      }
    
      @media screen and (max-width:768px) {
        .software-text p{
          width: 80%;
          padding: 2%;
        }
        .software-menu-box{
          width: 100%
        }
        .software-menu{
          width: 90%;
          margin: auto;
        }
        .software-menu ul li{
          width: 30% !important;
          height: 175px !important;
          margin-right: 0;
        }
        .software-menu ul li p{
          font-size: 14px;
          padding: 0px 10px;
          line-height:18px;
        }
      }
  </style>

<script>
// 获取所有的li元素
const listItems = document.querySelectorAll('#softmenu-ul li');

listItems.forEach(item => {
  item.addEventListener('mouseover', () => {
    // 移除其他li的curr类和其内部h4的currh4类
    listItems.forEach(li => {
      li.classList.remove('curr');
      const h4 = li.querySelector('h4');
      if (h4) {
        h4.classList.remove('currh4');
      }
    });

    // 给当前悬停的li添加curr类
    item.classList.add('curr');

    // 给当前悬停的li内部的h4添加currh4类
    const h4 = item.querySelector('h4');
    if (h4) {
      h4.classList.add('currh4');
    }
  });
});

</script>