Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
vnmslf
24 / 24 / 4
Регистрация: 13.03.2015
Сообщений: 214
#1

Hover, z-index - HTML, CSS

06.05.2016, 17:24. Просмотров 438. Ответов 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
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Hover, z-index (HTML, CSS):

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

Как сделать отображене нужного мне контента в index.php и index.html ? - HTML, CSS
Здравствуйте ! Подскажите пожалуйста . Опишу ситуацию вкратце есть форум index.php в главной странице есть Раздел &quot;Самые обсуждаемые темы...

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

Index of Elements,Index of Attributes.Deprecated - HTML, CSS
Здраствуйте!Обьясните мне пожалуйста , зачем люди используют элементы которые скоро удалятся? Например: align,height,link,size,type и...

Index php исходного кода, от папки index php которая в корне отличаются - HTML, CSS
хочу сделать расположение блоков один за другим - а не столбом, но проблема в том что имя только присвоено первому &lt;div class=&quot;first&quot;&gt;,а...

A:hover - HTML, CSS
Не срабатывает, что делать? /*Цвет ссылки при наведении на неё мышки*/ A.paster2:hover{color:#993300; font-style:italic; /*Курсив*/ ...

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

Не по теме:

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

0
Stas_Garcia
Ушел наливать чай
186 / 135 / 27
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 19:58 #4
"Бахай скриптами"(с)
0
Миниатюры
Hover, z-index  
vnmslf
24 / 24 / 4
Регистрация: 13.03.2015
Сообщений: 214
06.05.2016, 21:17  [ТС] #5
Цитата Сообщение от Stas_Garcia Посмотреть сообщение
"Бахай скриптами"(с)
Да, я уже тоже постепенно прихожу к такому выводу... просто не хотелось бы юзать JS, из-за такого простого меню - утяжелять сайт... совсем не хочется.
0
Stas_Garcia
Ушел наливать чай
186 / 135 / 27
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 21:22 #6
Цитата Сообщение от vnmslf Посмотреть сообщение
утяжелять сайт
Ну так всю работу с z-index и анимацией перекинь на @keyframes, например, а с js тупо проверить hover и включить фрейм.
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,564
06.05.2016, 21:29 #7
Лучший ответ Сообщение было отмечено автором темы, экспертом или модератором как ответ
Если я вас правильно понял, то при наведении на шапку изменить z-index у блока main получится следующим образом:
CSS
1
.header:hover + .main{z-index: 100;}
Пример https://jsfiddle.net/rf87xccb/
1
vnmslf
24 / 24 / 4
Регистрация: 13.03.2015
Сообщений: 214
06.05.2016, 21:32  [ТС] #8
Цитата Сообщение от Mr Coder Посмотреть сообщение
Если я вас правильно понял, то при наведении на шапку изменить z-index у блока main получится следующим образом:
Ах если б все было так просто... В блоке header есть 4 блока, при наведении на каждый из которых "выпадает" своя подменюшка, когда она выпадает - она ложится поверх блока main, для этого мне нужно убрать main "назад". Я попробую вашу идею с использованием +, и погуглю еще об этом, но думаю, что это не поможем... Как попробую - отпишусь тут о результатах. Спасибо))
0
Stas_Garcia
Ушел наливать чай
186 / 135 / 27
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 21:43 #9
Звезды говорят, что средствами CSS реализовать подобное невозможно. Либо js, либо менять лэйаут.
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,564
06.05.2016, 21:51 #10
vnmslf, Не нужен тут js. Покажите ваш код html и если есть изображение шапки.
Вот тут простой пример выпадающего меню без js и z-index https://jsfiddle.net/95qu8kfw/1/
0
Stas_Garcia
Ушел наливать чай
186 / 135 / 27
Регистрация: 02.03.2013
Сообщений: 652
06.05.2016, 22:09 #11
Цитата Сообщение от Mr Coder Посмотреть сообщение
Не нужен тут js.
Цитата Сообщение от Stas_Garcia Посмотреть сообщение
Либо js, либо менять лэйаут.
html код в шапке.
0
vnmslf
24 / 24 / 4
Регистрация: 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 - HTML, CSS
Вот такой вопрос: Не работают все стили с псевдоклассом :hover в IE, причём во всех версиях, а не только в IE6 (говорю потому что якобы все...

Hover - HTML, CSS
Здравствуйте. Как сделать hover как тут: http://faridos.com/test На верхних иконках. Кружочек при наведении.

Hover в IE - HTML, CSS
В IE hover отображается коряво Как это можно исправить?

Не работает .hover - HTML, CSS
Имеется 9 блоков, и обработчик наведения курсора на блоки .hover, который выводит квадрат в центре блока. При 1-й загрузке страницы hover...


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

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

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