将鼠标跟随特效分享给喜欢花草的朋友。这种鼠标跟随效果还是很酷的。它不是那种追随很多零零碎碎的鼠标效果。只有一个圆圈跟随鼠标指针。遇到超链接，圆圈会变成半透明背景，是国外网站常见的类型，国外网站常见的一种的特效，具体效果看本站。

添加方法非常简单，将下面代码添加到当前主题函数模板 functions.php 最后：

1. // 加载jquery开始，如果主题已加载不加这段。

2. function zm_jquery_script() {

3. 	wp_enqueue_script( 'jquery' );

4. }

5. add_action( 'wp_enqueue_scripts', 'zm_jquery_script' );

6. // 加载jquery结束

7. function zm_mouse_cursor() { ?>

8. <!-- 必须的DIV -->

9. <div class="mouse-cursor cursor-outer"></div>

10. <div class="mouse-cursor cursor-inner"></div>

11. <!-- JS脚本 -->

12. <script>

13. jQuery(document).ready(function($){

14. 	var myCursor = jQuery('.mouse-cursor');

15. 	if (myCursor.length) {

16. 		if ($('body')) {

17. 			const e = document.querySelector('.cursor-inner'),

18. 			t = document.querySelector('.cursor-outer');

19. 			let n,

20. 			i = 0,

21. 			o = !1;

22. 			window.onmousemove = function(s) {

23. 				o || (t.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)"),

24. 				e.style.transform = "translate(" + s.clientX + "px, " + s.clientY + "px)",

25. 				n = s.clientY,

26. 				i = s.clientX

27. 			},

28. 			$('body').on("mouseenter", "a, .cursor-pointer",

29. 			function() {

30. 				e.classList.add('cursor-hover'),

31. 				t.classList.add('cursor-hover')

32. 			}),

33. 			$('body').on("mouseleave", "a, .cursor-pointer",

34. 			function() {

35. 				$(this).is("a") && $(this).closest(".cursor-pointer").length || (e.classList.remove('cursor-hover'), t.classList.remove('cursor-hover'))

36. 			}),

37. 			e.style.visibility = "visible",

38. 			t.style.visibility = "visible"

39. 		}

40. 	}

41. })

43. </script>

44. <!-- 样式 -->

45. <style>

46. .mouse-cursor {

47. 	position: fixed;

48. 	left: 0;

49. 	top: 0;

50. 	pointer-events: none;

51. 	border-radius: 50%;

52. 	-webkit-transform: translateZ(0);

53. 	transform: translateZ(0);

54. 	visibility: hidden

55. }

57. .cursor-inner {

58. 	margin-left: -3px;

59. 	margin-top: -3px;

60. 	width: 6px;

61. 	height: 6px;

62. 	z-index: 10000001;

63. 	background: #ffa9a4;

64. 	-webkit-transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out;

65. 	transition: width .3s ease-in-out,height .3s ease-in-out,margin .3s ease-in-out,opacity .3s ease-in-out

66. }

68. .cursor-inner.cursor-hover {

69. 	margin-left: -18px;

70. 	margin-top: -18px;

71. 	width: 36px;

72. 	height: 36px;

73. 	background: #ffa9a4;

74. 	opacity: .3

75. }

77. .cursor-outer {

78. 	margin-left: -15px;

79. 	margin-top: -15px;

80. 	width: 30px;

81. 	height: 30px;

82. 	border: 2px solid #ffa9a4;

83. 	-webkit-box-sizing: border-box;

84. 	box-sizing: border-box;

85. 	z-index: 10000000;

86. 	opacity: .5;

87. 	-webkit-transition: all .08s ease-out;

88. 	transition: all .08s ease-out

89. }

91. .cursor-outer.cursor-hover {

92. 	opacity: 0

93. }

95. .main-wrapper[data-magic-cursor=hide] .mouse-cursor {

96. 	display: none;

97. 	opacity: 0;

98. 	visibility: hidden;

99. 	position: absolute;

100. 	z-index: -1111

101. }

102. </style>

103. <?php }

104. add_action( 'wp_footer', 'zm_mouse_cursor' );

因默认主题未加载 jquery，所以代码中添加了 WP 自带的 jquery，如果你的主题已加载了 jquery，则不加第一段的代码（有注释），大部分主题应该都加载了 jquery。

当然你也可以将样式添加到当前主题 style.css 中，包括 JS 代码也可以加到一个单独文件中加载。