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

Что вы пытаетесь достичь? Если вы удалите: hover и нажмите ссылку, я думаю, вы обнаружите, что: active работает нормально. Но это не очень хорошо, так как вы укладываете его так же, как когда вы наводите на него курсор. Таким образом, в основном вы нависаете над ним, а затем отображается фоновое изображение, затем вы щелкаете по ссылке, и то же фоновое изображение продолжает показывать.

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

источник

2016-02-27 16:14:34 tomtom

Я хотел бы иметь выделенную ссылку, когда пользователь находится на странице, где она ведет таким же образом, как он двигает мышь на нем. Разве это не так: 'active 'должен работать? – user31027

№: активное средство: сделайте это, пока я нажимаю на элемент. – tomtom

Благодарим вас за объяснение. – user31027

The :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: зависание работает, но: активный не

ответ

Смежные вопросы