怎么使用CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)控制頁面元素效果

這篇文章主要介紹怎么使用CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)控制頁面元素效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

映射鼠標(biāo)位置或?qū)崿F(xiàn)拖拽效果，我們可以在 JavaScript 中做到這一點(diǎn)。但實(shí)際上，在CSS中有更加簡(jiǎn)潔的方法，我們可以在不使用JavaScript 的情況下，仍然可以實(shí)現(xiàn)相同的功能！

只使用CSS就可以實(shí)現(xiàn)模仿鼠標(biāo)"點(diǎn)擊和拖動(dòng)"效果，讓我們來看看如何獲得用戶的鼠標(biāo)位置，并將其映射到 CSS 自定義屬性：--positionX 和 --positionY 中。下面是具體實(shí)現(xiàn)步驟。

初始化

我們的第一個(gè) demo 將使用 --positionX 和 --positionY 自定義屬性來設(shè)置元素的寬度和高度。

<div class="content">
  <div class="square"></div>
</div>

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: black;
  height: 100vh;
}
.content {
  --positionX: 0;
  --positionY: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: 100px;
  height: 100px;
  background: white;
}

這是我們最初的狀態(tài)。我們這里有一個(gè)了名為 .content 的容器 <div>，它的的寬度和高度填充滿 body，它是項(xiàng)目的內(nèi)容主體。類名為 .square 的 <div> 是在這個(gè)例子中我們想用鼠標(biāo)來進(jìn)行控制的元素。

我們還在內(nèi)容中添加了兩個(gè)自定義屬性。我們將使用鼠標(biāo)位置來設(shè)置這些屬性的值，然后使用它們來設(shè)置 .square 元素的寬高。

一旦我們?yōu)槭髽?biāo)位置繪制了自定義屬性，我們幾乎可以使用它們來做我們想要的任何事情。例如，我們可以使用它們來設(shè)置一個(gè)絕對(duì)定位元素的 top/left、控制 transform 屬性、設(shè)置 background-position、調(diào)整 color，甚至設(shè)置偽元素的內(nèi)容等。我們將在文章的結(jié)尾看到一些這樣的演示效果及對(duì)應(yīng)的Codepen 項(xiàng)目鏈接。

grid 網(wǎng)格

目標(biāo)是在屏幕上創(chuàng)建一個(gè)不可見的網(wǎng)格，并使用 :hover 偽類將每個(gè)"單元格"映射成我們自定義屬性的一組值。此時(shí)，當(dāng)鼠標(biāo)光標(biāo)移動(dòng)到屏幕的右側(cè)時(shí)，--positionX 的值將更高：當(dāng)鼠標(biāo)向左移動(dòng)時(shí)，它變得更低。對(duì)于 --positionY 也是一樣的：當(dāng)光標(biāo)移動(dòng)到頂部時(shí)，值將更低，當(dāng)光標(biāo)移動(dòng)到底部時(shí)，值會(huì)更高。

關(guān)于我網(wǎng)格大小及網(wǎng)格分塊需要注意的地方：實(shí)際上我們可以使任何我們可以達(dá)到的網(wǎng)格尺寸。它越大，自定義屬性值就越準(zhǔn)確。但這也意味著我們將有更多網(wǎng)格分塊區(qū)間，網(wǎng)格分塊過多可能會(huì)導(dǎo)致性能問題，根據(jù)實(shí)際項(xiàng)目保持適當(dāng)?shù)钠胶獾卣{(diào)整網(wǎng)格大小是非常重要的。

現(xiàn)在，假如我們需要一個(gè)10×10網(wǎng)格，所以總共100個(gè)網(wǎng)格分塊在我們?nèi)萜髦小＃ㄔ趯?shí)際開發(fā)中可以使用pug等語法快速創(chuàng)建表格，例子中100個(gè)空間全部用 div 表示出來了）

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>

由于級(jí)聯(lián)關(guān)系，將 .cell 元素放在 .content 元素前面。

我們希望使用 .cell 類來控制 .square，由于CSS的級(jí)聯(lián)關(guān)系，一個(gè)元素只能控制其子子元素（或子元素的子元素）及位置在它的后面的兄弟元素（或兄弟元素的子元素）

這意味著兩件事：

• 每個(gè) .cell 必須先于需要控制的元素（在這個(gè)例子中為 .square）。

• 不能把這些 .cell  放在一個(gè)容器里，如果我們這樣做.content 元素就不再是他們的兄弟元素。

定位單元格

有很多方法可以定位 .cells。比如我們可以使用 position: absolute，并設(shè)置它們的 top 和 left 屬性；或者我們也可以通過 transform 來轉(zhuǎn)換位置；但最簡(jiǎn)單的選擇其實(shí)是使用 display: grid。

body {
  background-color: #000;
  height: 100vh;
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  z-index: 2;
}

border 只是暫時(shí)的，在開發(fā)中所以我們可以看到屏幕上的網(wǎng)格，稍后會(huì)刪除它。
z-index 非常重要，因?yàn)槲覀兿Ｍ麊卧癯霈F(xiàn)在內(nèi)容頂層。

以下是我們目前完成的內(nèi)容：

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: black;
  height: 100vh; 
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  z-index: 2;
 }
.content {
  --positionX: 0;
  --positionY: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: 100px;
  height: 100px;
  background: white;
}

添加值

我們想通過 .cell 來設(shè)置 --positionX 和 --positionY 的值。

當(dāng)我們 hover 懸停在第一個(gè)（左列）.cell上時(shí)，--positionX 值應(yīng)為 0。當(dāng)我們懸停在第二列中的 .cell 上時(shí)，值應(yīng)為 1。第三 2 ，等等。

y軸 也是如此。當(dāng)我們懸停在第一行（頂部）.cell上時(shí)，--positionY 應(yīng)該為 0 ，當(dāng)我們懸停在第二行的單元格上時(shí)，值應(yīng)該是 1，等等。

從左到右按順序排列著白色邊框和數(shù)字的黑色十乘十方格。

圖像中的數(shù)字表示網(wǎng)格中每個(gè)單元格的編號(hào)。如果以一個(gè)單一的 .cell 為例——42號(hào)單元格——我們可以使用 :nth-child()來選擇它：

.cell:nth-child(42) { }

但我們需要記住幾件事：

• 我們只希望此選擇器只在 hover 懸停在單元格上時(shí)生效，因此我們需要給它附件 :hover。

• 我們希望選擇的是 .content 元素而不是單元格本身，因此需要使用一般兄弟選擇器~ 來做到這一點(diǎn)。

因此，現(xiàn)在當(dāng)?shù)?2個(gè)單元格處于 hover 狀態(tài)時(shí)，要將 --positionX 設(shè)置為 1 與--positionY 設(shè)置為 3，需要這樣做：

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

但是有100個(gè)單元格，誰想這樣做100次呢?。坑袔追N方法可以使上述操作變得更容易：

• 使用 Sass 中的 @for 循環(huán)來遍歷所有 100 個(gè)單元格，并做一些數(shù)學(xué)運(yùn)算，每次遍歷設(shè)置對(duì)應(yīng)的的 --positionX 和 --positionY值。

• 將 x 軸和 y 軸分開，用帶有:nth-child 的功能符號(hào)分別選擇每行和每列。

• 結(jié)合這兩種方法，同時(shí)使用Sass @for 循環(huán)和 :nth-child 功能符號(hào)。

我深思熟慮過什么是最簡(jiǎn)單最好的方法，雖然所有方法都有優(yōu)缺點(diǎn)。根據(jù)要編寫的代碼數(shù)量、編譯代碼的質(zhì)量和數(shù)學(xué)復(fù)雜性方面的考慮，最終我選擇了第三種方法。如果你有更好的方法，可以在評(píng)論中告訴我。

用 @for 循環(huán)設(shè)置值

@for $i from 0 to 10 {
 .cell:nth-child(???):hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(???):hover ~ .content {
    --positionY: #{$i};
  }
}

這是一個(gè)基本循環(huán)框架，我們需要循環(huán)10次，因?yàn)樯鲜鰳?gòu)造的網(wǎng)格有10行和10列。將網(wǎng)格分為 x軸和 y軸 ，對(duì)每列設(shè)置 --positionX，對(duì)每行設(shè)置 --positionY?，F(xiàn)在要做的是找到一個(gè)合適的數(shù)學(xué)表達(dá)式，填到 ??? 處，來進(jìn)行選擇每行和每列。

讓我們從 x軸 開始

回到我們上面帶有數(shù)字的網(wǎng)格圖像，我們可以看到 第2列 中所有單元格的數(shù)字是 10的倍數(shù)加2。第2列 中的單元格是 10的倍數(shù)加3...

現(xiàn)在，讓我們把它轉(zhuǎn)換成 :nth-child 的功能表達(dá)式。以下是第2列可以表示為：

:nth-child(10n + 2)

• 10n表示選擇每個(gè)10的倍數(shù)。

• 2 是列號(hào)，在我們的循環(huán)中，將用 #{$i +1] 替換列號(hào)來按順序重復(fù)。

.cell:nth-child(10n + #{$i + 1}):hover ~ .content {
  --positionX: #{$i};
}

現(xiàn)在讓我們處理y軸

再看一遍網(wǎng)格圖像，關(guān)注 第4行，網(wǎng)格編號(hào)介于 41與50 之間。第5行 的網(wǎng)格編號(hào)在 51與60 之間等等。要選擇每行，我們需要定義其范圍。例如，第四行的范圍是：

.cell:nth-child(n + 41):nth-child(-n + 50)

(n + 41) 是范圍的開始。
(-n + 50) 是范圍的結(jié)尾。
現(xiàn)在，我們用 $i值 的來代替數(shù)學(xué)公式中的數(shù)字。對(duì)于范圍的開始，得到 (n + #{10 * $i + 1}) ，對(duì)于范圍結(jié)尾獲得 (-n + #{10 * ($i + 1)})。

因此，最終的 @for 循環(huán)是：

@for $i from 0 to 10 {
  .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --positionY: #{$i};
  }
}

映射完成！當(dāng)我們懸停在元素上時(shí)，--positionX 和 --positionY 的值會(huì)根據(jù)鼠標(biāo)位置而變化。這意味著我們可以使用它們來控制內(nèi)容中的元素。

處理自定義屬性

好了，現(xiàn)在我們已經(jīng)把鼠標(biāo)位置映射到兩個(gè)自定義屬性，接下來的事情是使用它們來控制 .square 元素的寬度和高度值。

讓我們從寬度開始，假設(shè)我們希望 .square 元素的的最小寬度為 100px（即當(dāng)鼠標(biāo)光標(biāo)位于屏幕左側(cè)時(shí)），我們還希望鼠標(biāo)光標(biāo)向右移動(dòng)的每一步都增長(zhǎng) 20px。

使用 calc()，就可以實(shí)現(xiàn)：

.square {
  width: calc(100px + var(--positionX) * 20px);
}

對(duì)于高度我們做同樣的操作，但用 --positionY 代替：

.square {
  width: calc(100px + var(--positionX) * 20px);
  height: calc(100px + var(--positionY) * 20px);
}

就是這樣！現(xiàn)在我們有一個(gè)簡(jiǎn)單的 .square 元素，寬度和高度由鼠標(biāo)位置控制。將鼠標(biāo)光標(biāo)在界面移動(dòng)，查看正方形的寬度和高度如何相應(yīng)地變化，下面是整個(gè)示例的完整代碼。

<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<!-- 97 more cells -->
<div class="content">
  <div class="square"></div>
</div>

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}
body {
  background-color: black;
  height: 100vh; 
  display: grid;
  grid-template: repeat(10, 1fr) / repeat(10, 1fr);
}
.cell {
  width: 100%;
  height: 100%;
  // border: 1px solid gray;
  z-index: 2;
}
@for $i from 0 to 10 {
 .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --positionX: #{$i};
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --positionY: #{$i};
  }
}
.content {
  --positionX: 0;
  --positionY: 0;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square {
  width: calc(100px + var(--positionX) * 20px);
  height: calc(100px + var(--positionY) * 20px);
  background: white;
  transition: all 0.3s;
}

我添加了一個(gè)小的過渡效果，看起來更順暢。當(dāng)然，這不是必須的。我也注釋了 .cell 元素的的 border。

讓我們嘗試一種替代方法

可能會(huì)有一種情況，即您想要"繞過" --positionX 和 --positionY，并將最終值直接設(shè)置在 @for循環(huán) 中。對(duì)于我們的例子而言，可以像下面這樣實(shí)現(xiàn)：

@for $i from 0 to 10 {
 .cell:nth-child(10n + #{$i + 1}):hover ~ .content {
    --squareWidth: #{100 + $i * 20}px;
  }
  .cell:nth-child(n + #{10 * $i + 1}):nth-child(-n + #{10 * ($i + 1)}):hover ~ .content {
    --squareHeight: #{100 + $i * 20}px;: #{$i};
  }
}

.square 元素從而可以這樣自定義屬性：

.square {
  width: var(--squareWidth);
  height: var(--squareHeight);
}

這種方法相比較而言更靈活一些，因?yàn)樗试S更高級(jí)的 Sass 數(shù)學(xué)（和字符串）函數(shù)，但它的主要原理與我們示例的內(nèi)容是完全相同的。

以上是“怎么使用CSS實(shí)現(xiàn)鼠標(biāo)移動(dòng)控制頁面元素效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！