Psuedo-класс, чтобы держать div видимым в фокусе / активным?

У меня есть div, который скрыт, пока пользователь не нажмет на ссылку. С помощью селектора a:active + div отображается div. Затем я должен div:active, div:focus держать div видимым.

В то время как сделать div видимым было достаточно просто, держать его видимым-это моя проблема. Если я нажимаю на div (снимая активный элемент со ссылки и помещая фокус / активный элемент на div), то div снова исчезает.

Я пробовал использовать div:hover и в то время как это показывает div (даже после того, как я нажимаю на него), когда я зависаю от div все равно исчезает. Почему :active и :focus не применяются к моему div?

Пример: http://jsfiddle.net/pJWPE/

3 3
css pseudo-class

3 ответа:

Вы можете использовать другой подход, используя вместо этого псевдокласс :target. Лучший способ проиллюстрировать это на примере: 

#box {
  display: none;
}
#box:target {
  display: block;
}
<a href="#box">Open</a>  <a href="#">Close</a>

<div id="box">content</div>

Внимание, я не уверен, что поддержка браузера похожа на этот пример. Он работает в моей версии Chrome.

4

Почему: active и: focus не применяются к моему div?

Потому что :active и :focus имеют некоторые ограничения:

6.6.1.2. Псевдоклассы действий пользователя: hover,: active и: focus

Интерактивные агенты пользователей иногда изменяют рендеринг в ответ на действия пользователя. Селекторы предоставляют три псевдокласса для выбора элемента, на который действует пользователь.

  • применяется псевдокласс :active в то время как элемент активируется пользователем. Например, между тем, как пользователь нажимает кнопку мыши и отпускает ее. В системах с более чем одной кнопкой мыши :active применяется только к основной или основной кнопке активации (обычно "левой" кнопке мыши) и любым ее псевдонимам.
  • псевдокласс :focus применяется, когда элемент имеет фокус (принимает события клавиатуры или мыши или другие формы ввода).

Может существовать язык документа или реализация конкретных ограничений, на которых элементы могут стать :active или приобрести :focus.

Http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#dynamic-pseudos

A <div> не является какой-либо формой ввода (<textare>, <input>, ...) или иначе интерактивный элемент (например <a>, <audio>, <video>). Это просто контейнер. Ни :focus, ни :active не будут применяться.

Используйте :target вместо , предложенного Кейси.

2

Контекст-это меню, содержащее подменю, которые я хочу показать при нажатии на связанное меню и сохранить его показанным при нажатии на ссылку. (очень похоже на вас).

HTML разметка: 

<nav>
    <ul>
        <li>
            <a href="#" > 
            </a>
            <div>
                <ul>
                   <li> 
                      <a href="/sites/p1.php">submenu link1</a></li>
                   <li> 
                      <a href="/sites/p2.php">submenu link2</a></li>
                   <li> 
                      <a href="/sites/p3.php">submenu link3</a></li>
                </ul>
            </div>
        </li>
    </ul> 
</nav>

Для браузера Firefox и Chrome я лично использую: 

nav > ul > li > a:focus + div, nav > ul > li > a + div:active {
   display : block;
}

Первый селектор ссылается на мой якорь ссылки,чтобы получить, какое подменю показывать, когда он нажат / выбрана вкладка. Во-вторых, держать подменю div открытым, когда вы нажимаете на ссылку (она продолжает показывать активный div).

Это отлично работает для меня, но не для IE, к сожалению.

0