CSS：懸停的作品，但：積極不

我準備一個WordPress主題，想不通爲什麼:active在我的CSS，而:hover工作正常不工作。CSS：懸停的作品，但：積極不

HTML：

(...) 
<div id="mainMenu"> 
    <div id="mm_links"> 
    <a id="mm_1" href="index.php/about-icar/">About ICAR</a><br/> 
    <a id="mm_2" href="">News</a><br/> 
    <a id="mm_3" href="index.php/for-the-authors/">For the authors</a><br/> 
    <a id="mm_4" href="index.php/resources/">Resources</a><br/> 
    <a id="mm_5" href="index.php/contact-promotion/">Contact<br/>& promotion</a><br/> 
    </div> 
    <div id="mm_tail"></div> 
</div> 
(...)

CSS：

div#mainMenu{ 
     float: left;             
     width: 140px; 
     height: 430px; 
     margin-top: 48px; 
     background-image: url("img/mainMenu.svg"); 
     background-size:cover; 
     text-align: center; 
} 

div#mainMenu a{ 
     font-family: 'Raleway', sans-serif; 
     font-size: 10.6pt; 
     text-decoration: none; 
} 

div#mainMenu a:link, div#mainMenu a:visited, div#mainMenu a:active { 
     color: #262E5B; 
} 

div#mainMenu a:hover{ 
     color: #262E5B; 
} 

a#mm_1 { 
     position: relative; 
     display: table-cell; 
     top: 21px; 
     left: 18px; 
     width: 120px; 
     height: 35px; 
     vertical-align: middle; 
} 

a#mm_1:hover, a#mm_1:active {    <-- THIS IS NOT WORKING 
     background-image: url('img/ElementAbout.png'); 
     background-size: cover; 
} 

div#mm_links{ 
     clear:both; 
     height: 430px; 
} 

div#mm_tail{ 
     background-color: white; 
     border-left: 2px solid #262E5B; 
     border-right: 2px solid #262E5B; 
     border-bottom: 2px solid #262E5B; 
     width: 30px; 
     height: 100%; 
     clear: both; 
     float: right; 
}

來源

2016-02-27 user31027

什麼是你想實現什麼？如果刪除：懸停，然後按下鏈接我想你會發現：積極工作就好了。但是它不會很好，因爲您將它設置爲與懸停時相同。所以基本上你正在上空盤旋，然後背景圖像顯示，然後單擊鏈接和相同的背景圖像一直顯示。

a#mm_1:active {   
     background-image: url('img/ElementAbout.png'); 
     background-size: cover; 
}

來源

2016-02-27 16:14:34 tomtom

我想有高亮顯示的鏈接，當用戶在頁面的地方以同樣的方式帶領當他移動鼠標時。這不是''active'應該工作的方式嗎？ – user31027

號：積極的手段：這樣做，而我點擊的元素。 – tomtom

謝謝你的解釋。 – user31027

:hover pseudo-class當鼠標光標在其上方時，選擇一個元素。

的:active pseudo-class適用於當元件被點擊（或以其它方式激活）的樣式。

在你的代碼，你:hover和:active風格是相同的。

a#mm_1:hover, a#mm_1:active { 
     background-image: url('img/ElementAbout.png'); 
     background-size: cover; 
}

懸停或點擊時，您不會注意到任何差異。

然而，給每個不同的風格，你會看到其中的差別：

a#mm_1:hover { background-color: yellow; } 

a#mm_1:active { background-color: red; }

DEMO

來源

2016-02-27 16:25:24

CSS：懸停的作品，但：積極不

回答

相關問題