純CSS3實現鼠標經過的效果可以通過使用CSS的hover屬性來實現。hover屬性可以讓用戶在鼠標懸停的狀態下,看到頁面上元素的變化,包括鼠標經過的效果。
下面是一個簡單的例子,展示了如何在HTML元素上使用CSS的hover屬性來實現鼠標經過的效果:
```html
<div id="myDiv">
<p>Hello, world!</p>
</div>
```css
#myDiv {
position: relative;
width: 200px;
height: 200px;
#myDiv p {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: red;
transition: all 0.3s ease;
#myDiv:hover p {
top: 100px;
在這個例子中,我們使用了CSS的hover屬性來讓p元素在鼠標懸停的狀態下發生變化。當我們鼠標懸停在p元素上時,它會從原來的top值(0)移動到100px處。這個移動的距離是基于鼠標的移動距離而計算的。
除了移動效果外,我們還可以使用CSS的transform屬性來讓p元素在鼠標經過時發生變化。例如,如果我們想讓p元素的大小在鼠標經過時乘以1.5,可以使用以下代碼:
```css
#myDiv p {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background-color: red;
transition: all 0.3s ease;
#myDiv:hover p {
top: 100px;
#myDiv p:hover + top {
top: 100px * 1.5;
在這個例子中,我們使用了加號運算符來將鼠標經過時p元素所應該移動的距離乘以1.5。這樣,當鼠標懸停p元素上時,p元素的大小就會在鼠標經過時乘以1.5。
通過使用CSS的hover屬性,我們可以實現一個簡單的鼠標經過的效果,讓用戶可以看到元素的變化。