一. CSS
- .postDesc-img {
- position: absolute;
- padding-bottom: 0;
- float: right;
- right: 0;
- bottom: 0;
- z-index: -1;
- }
- .cnblogs-post-body h3 {
- text-decoration: none;
- font-size: 10px;
- line-height: 1px;
- }
- .cnblogs-post-body h2 {
- color: red;
- font-size: 20px;
- }
- .day {
- padding: 54px 4% 2% 4%;
- border: 1px solid #ddd;
- border-radius: 2px;
- transition: all 0.35s;
- box-shadow: 2px 2px 3px rgba(135, 139, 144, 0.4);
- margin-bottom: 50px;
- margin-top: 0px;
- }
- .day:hover {
- transform: scale(1.02);
- box-shadow: 12px 12px 18px rgba(50, 50, 50, 0.4);
- }
二. JS
- <script>
- let xx = document.querySelectorAll('.day');
- console.log(xx);
- let aa = document.querySelectorAll('.postDesc');
- for (let ii = 0; ii <xx.length; ii++) {
- xx[ii].onmousemove = function () {
- this.querySelector('.postDesc').innerhtml='<img class="postDesc-img"src="https://images.cnblogs.com/cnblogs_com/pythonywy/1455150/o_SUPERMAN.png"alt="">';
- };
- xx[ii].onmouseout = function () {
- for (let i = 0; i <aa.length; i++) {
- console.log(i);
- aa[i].innerHTML = '';
- }
- };
- }
- </script>
三. 缺点
超人图片是博主自己 ps 的, 可能随笔展示大小不一样会有点像素的变化, 我处理后的图片是 290*130 的
我是通过把'postDesc'类里面替换成 < img 标签 > 实现的, 你们如果要保留原来的编辑来 可以稍微修改 JS 即可, 可以问我
样式按照自己喜欢可以微调
鼠标也是博主自己画的
四. 要是喜欢我的鼠标样式下面这段 CSS 代码
- a:hover {
- cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_Hand.png), auto;
- }
- a:active {
- cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_AppStarting.png), auto;
- }
- a:focus {
- cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_wait.png), auto;
- }
- p, code {
- cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_IBeam.png), auto;
- }
- * {
- cursor: url(https://www.cnblogs.com/images/cnblogs_com/pythonywy/1516412/o_Arrow.png), auto;
- }
五, 效果展示
鼠标没有移动上面
鼠标移动上面
来源: http://www.bubuko.com/infodetail-3159677.html