Question

我正在准备一个WordPress主题，无法解释为什么:active在:hover正常工作时我的CSS中(...) <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> (...)无效。

HTML：

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;
}

CSS：

Alamofire.request(.POST, URLString, parameters:parameters,encoding:.JSON).responseJSON { (response) -> Void in
        if response.result.value != nil {
             print(response.result.value)
        }
    }

Answer 1

你想要完成什么？如果你删除：悬停并按下链接我认为你会发现：active正常工作。但它没有太大的好处，因为你的样式与悬停在它上面时相同。所以基本上你是在它上面盘旋然后背景图像显示，然后你点击链接，同样的背景图像一直显示。

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

Answer 2

http://github.com/Angstrom-distribution/setup-scripts.git在鼠标光标正上方时选择一个元素。

:hover 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; }

:active pseudo-class

CSS：悬停工作但是：活动不起作用

2 个答案: