unhiding div не работает должным образом

Question

unhiding div не работает должным образом

0

Я пытаюсь отобразить div при зависании до определенного div, если он не отображается, он работает только на последнем div.

вот пример. http://jsfiddle.net/yCPj2/

HTML

<div id="nav" style="margin: 0 auto; width: 500px;">
    <a href="#">
        <div id="nav1" style="width:99px; height: 50px; border-right: thin               solid black; float: left; background: red;"></div>
    </a>
    <a href="#">
        <div id="nav2" style="width:99px; height: 50px; border-right: thin solid black; float: left; background: red;"></div>
    </a>
    <a href="#">
        <div id="nav3" style="width:99px; height: 50px; border-right: thin solid black; float: left; background: red;"></div>
    </a>
    <a href="#">
        <div id="nav4" style="width:99px; height: 50px; border-right: thin solid black; float: left; background: red;"></div>
    </a>
    <a href="#">
        <div id="nav5" style="width:100px; height: 50px; float: left; background: red;"></div>
    </a>
    <div id="hidden"></div>
</div>

CSS

#hidden {
    width: 100px;
    height: 50px;
    background: blue;
    position: absolute;
    opacity: 0.4;
    display: none;
}

a:hover + #hidden {
    display: block;
}

user3457998 28 апр. 2014, в 06:21

Источник

0

в чем дело? быть более ясным
ɹɐqʞɐ zoɹǝɟ 28 апр. 2014, в 03:46
2

Работает ли для вас изменение + на ~? например: hover ~ #hidden {
forestclown 28 апр. 2014, в 03:47
1

Вам лучше использовать #nav:hover > #hidden { display: block;} , использование a вместо #nav вызовет небольшое мерцание, когда вы #nav курсор на первый a (который перекрывается / перекрывается скрытым div когда он показано снова).
King King 28 апр. 2014, в 03:53
0

Хорошо, я пытаюсь создать анимированную панель навигации, используя javascript, сначала у меня есть 5 вкладок навигации, я хочу, чтобы скрытый div отображался при наведении на эти 5 вкладок ... но по какой-то причине скрытый div отображается только на 5-й вкладке. @forestclown Нету все тот же ..
user3457998 28 апр. 2014, в 03:54

Показать ещё 2 комментария

Теги:

html

css

3 ответа

Ещё вопросы

Работает ли для вас изменение + на ~? например: hover ~ #hidden {
Вам лучше использовать #nav:hover > #hidden { display: block;} , использование a вместо #nav вызовет небольшое мерцание, когда вы #nav курсор на первый a (который перекрывается / перекрывается скрытым div когда он показано снова).
Хорошо, я пытаюсь создать анимированную панель навигации, используя javascript, сначала у меня есть 5 вкладок навигации, я хочу, чтобы скрытый div отображался при наведении на эти 5 вкладок ... но по какой-то причине скрытый div отображается только на 5-й вкладке. @forestclown Нету все тот же ..

superUntitled · Answer 1 · 2014-04-28T04-17-00.000Z

Запуск вашего зависания в контейнере div:

#nav:hover #hidden {display: block; }

http://jsfiddle.net/yCPj2/6/

Alex · Answer 2 · 2014-04-28T03-33-00.000Z

вам просто нужно изменить определенный код

a:hover ~ #hidden {
    display: block;
}

JSFIDDLE

Artem Fitiskin · Answer 3 · 2014-04-28T02-46-00.000Z

Измените + на ~ в вашем экземпляре зависания:

a:hover ~ #hidden {
    display: block;
}

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

Посмотрите обновленную скрипту: http://jsfiddle.net/ArtemFitiskin/yCPj2/4/

#nav {
    font-size: 0;
    position: relative;
}

#nav a {
    display: inline-block;
    width: 99px; 
    height: 50px; 
    border-right: thin solid black;
    background: red;
    font-size: 14px;
}

#hidden {
    width: 100px;
    height: 50px;
    background: blue;
    position: absolute;
    opacity: 0.4;
    display: none;
    top: 0;
}

#nav a:hover ~ #hidden {
    display: block;
}