Влияет на div, когда нацелена другая

0

У меня есть два div, размещенных внутри элемента li:

<li>
    <img src"..." />
    <div-1></div>
    <div-2></div>
<li>

Div-1 - это надпись на надписи изображения, содержащая заголовок и изображения при наведении изображения.
Div-2 - это лайтбокс css с темным фоном, который появляется при щелчке по изображению.

Когда открывается лайтбокс (div-2) (с: цель), div-1 остается видимым за фоном div-2. Есть ли решение, которое может скрыть div-1, когда div-2 нацелен?

я пробовал несколько вариантов, но они не работают:

li .div-1:target ~ div-2 {display: none}
li > .div-1:target ~ div-2 {display: none}
li > .div-1:target + div-2 {display: none}

... а также: как влиять на другие элементы, когда вил div

Не удалось настроить демонстрацию скриптов, надеюсь, что информация выше помогает.
Любая помощь appriciated :)

  • 0
    Вы можете изменить порядок деления в разметке?
  • 0
    Насколько я знаю, вы не можете :target divs. Похоже, вы все равно используете JavaScript (отображение лайтбокса), так что вы можете просто использовать это.
Показать ещё 4 комментария
Теги:
target
lightbox

1 ответ

1
Лучший ответ

Измените порядок div в разметке.

<li>
    <img src"..." />
    <div-2></div>
    <div-1></div>
<li>

и применять

.div-2:target + div-1
{
    display:none;
}

теперь, когда div-2 нацелен, div-1 исчезает.

Поделиться
  • 0
    Изменение порядка HTML с .div-2:target + div-1 работал как шарм, большое спасибо :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню