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>