在最近幫人改**時，遇到了這種問題。場景描述如下：
頁面初始化時，左側第一欄「長江學者」要處於選中狀態【字型顏色改變，右側顯示該欄目的內容】；
滑鼠到左側其他選項時，選項文字顏色發生變化，右側內容跟著改變，同時上次選中的選項恢復原狀；
同時，切換時要有這種效果：切換後，滑鼠移開，狀態保留在最後一次切換時的狀態
解決思路
滑鼠浮動時出來右側內容，最先的想法肯定是用css的hover設定一下樣式。但是細想這種肯定不能解決問題。因為hover只有滑鼠懸浮於上才能顯示，滑鼠移開右側內容就沒有了。
那麼用js解決方法如下：
設定乙個變數flag儲存當前選中的選項；
切換時，將flag指向的選項恢復原狀，flag指向新的選項，新的選項顯示。
重點便在於設定乙個變數記錄當前選中的選項
示例**如下：
lang="en">
charset="utf-8">
titletitle>
head>
#main
#right,#left
li#left
li:first-child
.right
.right
:first-child
style>
var currentnode = "content1";
var changecontent = function
(obj)
script>
id="main">
id="left">
id="content1"
onmouseover="changecontent(this)">傑青li>
id="content2"
onmouseover="changecontent(this)">教授li>
id="content3"
onmouseover="changecontent(this)">講師li>
id="content4"
onmouseover="changecontent(this)">長江學者li>
ul>
div>
id="right">
id="aboutcontent1"
class="right">
傑青1li>
傑青2li>
傑青3li>
傑青4li>
ul>
div>
id="aboutcontent2"
class="right">
教授1li>
教授2li>
教授3li>
教授4li>
ul>
div>
id="aboutcontent3"
class="right">
講師1li>
講師2li>
講師3li>
講師4li>
ul>
div>
id="aboutcontent4"
class="right">
長江學者1li>
長江學者2li>
長江學者3li>
長江學者4li>
ul>
div>
div>
div>
body>
html>
一款純css3實現的滑鼠經過按鈕特效
今天再給大家帶來一款純css3實現的滑鼠經過按鈕特效。這款按鈕非常簡單，但效果很好，非常漂亮。一起看下效果圖 實現的 html div align center div class contener div class txt button wifeo div div class circle di...
滑鼠移動 hover的一種用法
2016 07 01 14 22 網頁設計 標籤 css 1101 今天看到 網格傳媒主題模版，在延伸文章閱讀中，我們看到將滑鼠移動到 標題的文章上，和背景以及錨文字的文字顏色一起變化了。這種變化，我們可以很簡單的知道是通過 hover這個css 來實現的，但我一開始未明白，是通過何種方式讓它一起變...
另一種MTK特效製作的方法，層複製
對於mtk平台來說，選單和螢幕特效曾經在很長的一段時間裡，影響甚遠。但對於其設計過程和方法，由於各種各樣的原因，很少有人提及。這裡介紹一種不同於前幾天日誌所載之方法的另一種方法，就是合併圖層，其核心實現函式如下。void my gdi layer copy gdi layer struct dst ...