您现在的位置是:网站首页> 编程资料编程资料

html+css+javascript实现跟随鼠标移动显示选中效果 利用HTML+CSS实现跟踪鼠标移动功能CSS实现鼠标移动到图片或按钮上改变大小的方法示例纯CSS实现鼠标移动切换图片示例在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)

2021-09-03 991人已围观

简介 这篇文章主要介绍了html+css+javascript实现跟随鼠标移动显示选中效果 ,需要的朋友可以参考下

1,显示效果:

2,html结构

3,主要的css样式

 .line-lpu{ height:55px; position:relative; width:100%; overflow:hidden;} .line-lpu span{ width:43px; height:46px; background:url('https://www.efose.com/images/banners/lpu_03.png') no-repeat; position:absolute;top:0;} .border-lpu{border-bottom:1px solid #959595; height:23px; } .join-lpu li{ width:19%; float:left; margin-right:8px;background:none; padding:0; } .join-lpu li a{ display:block; color:#606060; text-decoration:none; border:1px solid #959595; min-height:215px; padding:10px;position:relative; overflow:hidden;} .join-lpu li a:hover{border:1px solid #337ab7;} .join-lpu li b{ font-size:60px; position:absolute; bottom:7px; right:-1px; font-style:italic; color:#c7c7c7;} .clear{clear:both;} .step-lpu span{ background:url('https://www.efose.com/images/banners/icon-lpu.png') no-repeat; display:block; width:75px; height:65px; margin-left:28px;} .step-lpu .icon0{ background-position:0 0;} .step-lpu .icon1{ background-position:0 -70px;} .step-lpu .icon2{ background-position:0 -140px;} .step-lpu .icon3{ background-position:0 -204px; height:58px; margin-bottom:7px;} .step-lpu .icon4{ background-position:0 -260px;}

4,JavaScript的编写

总结

以上所述是小编给大家介绍的html+css+javascript实现跟随鼠标移动显示选中效果 ,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关内容

-六神源码网