Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
vnmslf
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 214
1

Hover, z-index

06.05.2016, 17:24. Просмотров 1163. Ответов 11
Метки нет (Все метки)

Доброго времени суток! (:
Столкнулся с проблемой... Есть блок, при наведении на который появляется менюшка. display: none/inline-block не подходит, visibility: hidden/visible тоже, поэтому пробую играться со слоями: z-index. Вопрос заключается в следующем, можно ли при наведении поменять z-index элемента, который не является дочерним элементом?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="header">
    <div class="block">
        Блок, при наведении на который должен поменяться z-index внешнего,<br />
        не дочернего элемента с классом main
        <div class="listing">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>...</li>
                <li>n-1</li>
                <li>n</li>
            </ul>
        </div>
    </div>
</div>
<div class="main">
    Собственно, элемент с классом main
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.listing {
    text-transform: none;
    position: relative;
    z-index: 0;
    display: inline-block;
    opacity: 0;
    line-height: 20px;
    margin: -111px 0 0 -1px;
    padding: 146px 0 30px 34px;
    width: calc(100% + 2px);
    background: rgba(247,247,247,.9);
    -webkit-transition: all .2s ease-out;
       -moz-transition: all .2s ease-out;
        -ms-transition: all .2s ease-out;
         -o-transition: all .2s ease-out;
            transition: all .2s ease-out;
}
 
.block:hover > .listing {
    opacity: 1;
    z-index: 4;
    padding: 186px 0 30px 34px;
    -webkit-transition: all .2s ease-out;
       -moz-transition: all .2s ease-out;
        -ms-transition: all .2s ease-out;
         -o-transition: all .2s ease-out;
            transition: all .2s ease-out;
}
 
.main {
    position: relative;
    z-index: 0;
    background: #fff;
    height: 1300px;
}
 
.block:hover > main {
    z-index: 4;
}
Привел для примера. Как можно изменить z-index элемента, который не является дочерним? JS совсем не хотелось бы сюда впутывать... Заранее спасибо!
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.05.2016, 17:24
Ответы с готовыми решениями:

CSS (hover) отменить действие последнего hover на все элементы
Всем доброго времени суток. У меня следующая загвоздка: нашел скрипт для...

Как сделать отображене нужного мне контента в index.php и index.html ?
Здравствуйте ! Подскажите пожалуйста . Опишу ситуацию вкратце есть форум...

Конфликт между index.html и index.php
Народ, такая проблемка...Есть два index, один .html, другой - .php. Как сделать...

Index of Elements,Index of Attributes.Deprecated
Здраствуйте!Обьясните мне пожалуйста , зачем люди используют элементы которые...

Index php исходного кода, от папки index php которая в корне отличаются
хочу сделать расположение блоков один за другим - а не столбом, но проблема в...

11
Stas_Garcia
Ушел наливать чай
187 / 136 / 32
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 18:02 2
-del
0
vnmslf
06.05.2016, 19:50  [ТС]
  #3

Не по теме:

Цитата Сообщение от Stas_Garcia Посмотреть сообщение
-del
а я уже обрадовался:D

0
Stas_Garcia
Ушел наливать чай
187 / 136 / 32
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 19:58 4
"Бахай скриптами"(с)
0
Миниатюры
Hover, z-index  
vnmslf
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 214
06.05.2016, 21:17  [ТС] 5
Цитата Сообщение от Stas_Garcia Посмотреть сообщение
"Бахай скриптами"(с)
Да, я уже тоже постепенно прихожу к такому выводу... просто не хотелось бы юзать JS, из-за такого простого меню - утяжелять сайт... совсем не хочется.
0
Stas_Garcia
Ушел наливать чай
187 / 136 / 32
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 21:22 6
Цитата Сообщение от vnmslf Посмотреть сообщение
утяжелять сайт
Ну так всю работу с z-index и анимацией перекинь на @keyframes, например, а с js тупо проверить hover и включить фрейм.
0
Academik
659 / 439 / 171
Регистрация: 04.04.2013
Сообщений: 1,914
06.05.2016, 21:29 7
Лучший ответ Сообщение было отмечено vnmslf как решение

Решение

Если я вас правильно понял, то при наведении на шапку изменить z-index у блока main получится следующим образом:
CSS
1
.header:hover + .main{z-index: 100;}
Пример https://jsfiddle.net/rf87xccb/
1
vnmslf
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 214
06.05.2016, 21:32  [ТС] 8
Цитата Сообщение от Mr Coder Посмотреть сообщение
Если я вас правильно понял, то при наведении на шапку изменить z-index у блока main получится следующим образом:
Ах если б все было так просто... В блоке header есть 4 блока, при наведении на каждый из которых "выпадает" своя подменюшка, когда она выпадает - она ложится поверх блока main, для этого мне нужно убрать main "назад". Я попробую вашу идею с использованием +, и погуглю еще об этом, но думаю, что это не поможем... Как попробую - отпишусь тут о результатах. Спасибо))
0
Stas_Garcia
Ушел наливать чай
187 / 136 / 32
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 21:43 9
Звезды говорят, что средствами CSS реализовать подобное невозможно. Либо js, либо менять лэйаут.
0
Academik
659 / 439 / 171
Регистрация: 04.04.2013
Сообщений: 1,914
06.05.2016, 21:51 10
vnmslf, Не нужен тут js. Покажите ваш код html и если есть изображение шапки.
Вот тут простой пример выпадающего меню без js и z-index https://jsfiddle.net/95qu8kfw/1/
0
Stas_Garcia
Ушел наливать чай
187 / 136 / 32
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 22:09 11
Цитата Сообщение от Mr Coder Посмотреть сообщение
Не нужен тут js.
Цитата Сообщение от Stas_Garcia Посмотреть сообщение
Либо js, либо менять лэйаут.
html код в шапке.
0
vnmslf
25 / 25 / 5
Регистрация: 13.03.2015
Сообщений: 214
10.05.2016, 10:52  [ТС] 12
Цитата Сообщение от Mr Coder Посмотреть сообщение
Если я вас правильно понял, то при наведении на шапку изменить z-index у блока main получится следующим образом:
CSS
1
.header:hover + .main{z-index: 100;}
Пример https://jsfiddle.net/rf87xccb/
Да! Шикарное решение! Спасибо!
0
10.05.2016, 10:52
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
10.05.2016, 10:52

:hover в IE
Вот такой вопрос: Не работают все стили с псевдоклассом :hover в IE, причём во...

Hover
Здравствуйте. Как сделать hover как тут: http://faridos.com/test На верхних...

A:hover
Не срабатывает, что делать? /*Цвет ссылки при наведении на неё мышки*/...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru