深入探究CSS鼠標指針交互效果

第深入探究CSS鼠標指針交互效果將原本的鼠標指針樣式，修改成自己想要的效果，并且添加上一些特殊的交互效果。

修改鼠標樣式

首先，第一個問題，我們可以看到，上圖中，鼠標指針的樣式被修改成了一個圓點：

正常而言應該是這樣：

當然，這里比較簡單，在CSS中，我們可以通過cursor樣式，對鼠標指針形狀進行修改。

利用cursor修改鼠標樣式

cursorCSS屬性設置鼠標指針的類型，在鼠標指針懸停在元素上時顯示相應樣式。

cursor:auto;

cursor:pointer;

cursor:zoom-out;

/*使用圖片*/

cursor:url(hand.cur)

/*使用圖片，并且設置fallback兜底*/

cursor:url(hand.cur),pointer;

這個大家應該都清楚，通常而言，在不同場景下，選擇不同鼠標指針樣式，也是一種提升用戶體驗的手段。

當然，在本交互中，我們并非要將cursor光標設置成任一樣式，剛好相反，我們需要將他隱藏。

通過cursor:none隱藏光標

在這里，我們通過cursor:none隱藏頁面的鼠標指針：

cursor:none;

}

如此一來，頁面上的鼠標指針就消失了：

通過全局事件監(jiān)聽，模擬鼠標指針

既然，消失了，我們就簡單模擬一個鼠標指針。

我們首先實現一個10pxx10px的圓形div，設置為基于body絕對定位：

divid=g-pointer/div

#g-pointer{

position:absolute;

top:0;

left:0;

width:10px;

height:10px;

background:#000;

border-radius:50%;

}

那么，在頁面上，我們就得到了一個圓形黑點：

接著，通過事件監(jiān)聽，監(jiān)聽body上的mousemove，將小圓形的位置與實時鼠標指針位置重合：

constelement=document.getElementById(g-pointer

constbody=document.querySelector(body

functionsetPosition(x,y){

element.style.transform=`translate(${x}px,${y}px)`;

body.addEventListener(mousemove,(e)={

window.requestAnimationFrame(function(){

setPosition(e.clientX-5,e.clientY-5);

});

這樣，如果不設置cursor:none，將會是這樣一個效果：

再給body加上cursor:none，就相當于模擬了一個鼠標指針：

在這個基礎上，由于現在的鼠標指針，實際上是個div，因此我們可以給它加上任意的交互效果。

以文章一開頭的例子為例，我們只需要借助混合模式mix-blend-mode:exclusion，就能夠實現讓模擬的鼠標指針能夠智能地在不同背景色下改變自己的顏色。

對于混合模式這個技巧還有所疑問的，可以看看我的這篇文章：利用混合模式，讓文字智能適配背景顏色

/chokcoco/iCSS/issues/169

完整的代碼：

pLoremipsumdolorsitamet/p

divid=g-pointer-1/div

divid=g-pointer-2/div

body{

cursor:none;

background-color:#fff;

#g-pointer-1,

#g-pointer-2

position:absolute;

top:0;

left:0;

width:12px;

height:12px;

background:#999;

border-radius:50%;

background-color:#fff;

mix-blend-mode:exclusion;

z-index:1;

#g-pointer-2{

width:42px;

height:42px;

background:#222;

transition:.2sease-out;

}

constbody=document.querySelector(body

constelement=document.getElementById(g-pointer-1

constelement2=document.getElementById(g-pointer-2

consthalfAlementWidth=element.offsetWidth/2;

consthalfAlementWidth2=element2.offsetWidth/2;

functionsetPosition(x,y){

element.style.transform=`translate(${x-halfAlementWidth}px,${y-halfAlementWidth}px)`;

element2.style.transform=`translate(${x-halfAlementWidth2}px,${y-halfAlementWidth2}px)`;

body.addEventListener(mousemove,(e)={

window.requestAnimationFrame(function(){

setPosition(e.clientX,e.clientY);

});

我們就能完美還原出題圖的效果：

完整的代碼，你可以戳這里：MouseCursorTransition

https://codepen.io/Chokcoco/pen/rNJQXXV

偽類事件觸發(fā)

有一點需要注意的是，利用模擬的鼠標指針去Hover元素，Click元素的時候，會發(fā)現這些事件都無法觸發(fā)。

這是由于，此時被隱藏的指針下面，其實懸浮的我們模擬鼠標指針，因此，所有的Hover、Click事件都觸發(fā)在了這個元素之上。

當然，這個也非常好解決，我們只需要給模擬指針的元素，添加上pointer-events:none，阻止默認的鼠標事件，讓事件透傳即可：

pointer-events:none;

}

鼠標跟隨，不僅于此

當然，這里核心就是一個鼠標跟隨動畫，配合上cursor:none。

而且，鼠標跟隨，我們不一定一定要使用JavaScript。

我在不可思議的純CSS實現鼠標跟隨一文中，介紹了一種純CSS實現的鼠標跟隨效果，感興趣的也可以看看。

/chokcoco/iCS