广告
广告
广告
html/css/javascript您现在的位置是:主页 > html/css/javascript >

利用css3伪类实现鼠标移入悬停让背景颜色从中间向两边逐渐延伸展开

2024-02-23 07:47:14html/css/javascript 330人已围观

示例代码

<ul>
	<li>
		<div class="text"><p>测试的文字1</p></div>
	</li>
	<li>
		<div class="text"><p>测试的文字2</p></div>
	</li>
</ul>
<style>
li{height:30px;line-height:30px;background:#ddd;position:relative;list-style:none;width:300px;padding:0px 10px;text-align:center;}
li .text:before {content: '';position: absolute;left: 50%;width: 0;height: 100%;background-color: #023793;transition: all 0.5s;}
li .text p{z-index:1;position:relative;}
li:hover .text:before {width: 100%;left: 0;}
li:hover .text p{color:#fff;}
</style>


 


扫码添加技术微信【解决问题,仅需10元起】

专注中小企业网站建设、网站安全15年。
熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。
承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症,您有任何网站问题都可联系我们技术人员微信。
➥ 可淘宝担保交易,安全无风险

广告
广告
技术微信