js滑鼠切換案例

js滑鼠切換案例介紹

js滑鼠切換主要是當滑鼠操作文本内容的動作切換（滑鼠懸浮、滑鼠按下、滑鼠單擊）的時候文本會有不同的樣式産生，當滑鼠懸浮在文本上會有橙色顔色出現在文本内容上，當滑鼠按下去一直不放的時候是粉色的，當滑鼠單擊後是紅色的，本案例就是實作這個功能。

準備知識點

vue

指令

屬性指令v-bind，事件指令v-on

這些指令的文法與用法。

執行個體成員

el:挂載點，data：變量資料值，methods：事件方法，

這些執行個體成員的文法與用法。

html

标簽

div、script、style

這些标簽的文法與用法，屬性與行為。

css

選擇器

類選擇器(.)類選擇器文法：.類名來定義類屬性樣式

滑鼠操作

滑鼠懸浮

邏輯

滑鼠懸浮控制的區域是用塊标簽div包裹的區域，具體的是标簽語言内的文本。

滑鼠懸浮操作的控制邏輯

邏輯分為懸浮操作控制着變量類名具體的類名，類選擇器選擇類名定義具體的類屬性

滑鼠懸浮在div标簽上的文本上的事件，觸發了@mouseover事件指令，将@mouseover事件