CSS实现鼠标hover展开菜单

效果图:

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

html 复制代码
<!-- 软件介绍 -->
<div class="software-box">
  <div class="software-container">
  <div class="software-title">
  <h2>" 一个软件搞定所有 "</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>
相关推荐
Dragon Wu1 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym6 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫7 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫11 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat12 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。2 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome