Есть ли способ скрыть div с помощью css только при нажатии ссылки. Я делаю всплывающее окно, которое должно быть в состоянии закрыть, когда нет JS. Я пробовал различные методы, но они не работали, когда кнопка находится внутри div, которую нужно скрыть.Скрыть div только с CSS
, когда кнопка находится внутри div, которую необходимо скрыть.
Короткий ответ: Нет, вы не можете достичь этого, когда кнопка находится внутри элемента.
Благодаря Joseph Marikle
Однако, вы можете добиться этого, когда кнопка находится вне дел.
#hide {
display: none;
}
label {
cursor: pointer;
text-decoration: underline;
}
#hide:checked ~ #randomDiv {
display: none;
}<input type="checkbox" id="hide" />
<div id="randomDiv">
This is a div
<label for="hide">Hide div</label>
</div>Спасибо, сможет ли noscript сделать это? Я не знаком с тем, как это работает так жаль, если я полностью ошибаюсь. Также я мог бы использовать ключевой кадр при щелчке, чтобы переместить флажок вне сайта. – Verpz
Может ли noscript спрятать div с кнопкой внутри? Извините, я не знаю. – Verpz
«Короткий ответ: нет». Да, вы тоже можете. Просто используйте атрибут 'for': https://jsfiddle.net/jmarikle/b3981op4/1 –
Следующий пример скрывает DIV, когда флажок установлен.
Он использует селектор #closebutton ~ #targetdiv {..., который работает только с его элементами в этом заказе. Таким образом, флажок помещается внутри основного div на макете, но до этого в коде.
.main {
border-radius: 5px;
padding: 30px;
margin-bottom: 5px;
}
#A {
background: gold;
}
#B {
background: skyblue;
}
#C {
background: yellowgreen;
}
.close {
float: right;
margin-top: 30px;
margin-right: 75px;
height: 20px;
width: 20px;
}
.close:checked {
display: none;
}
.close:checked ~ #A, .close:checked ~ #B, .close:checked ~ #C {
display: none;
}
body {
overflow-y: scroll;
}<div id=groupA><input class="close" type="checkbox">
<div id=A class=main>info A</div></div>
<div id=groupB><input class="close" type="checkbox">
<div id=B class=main>info B</div></div>
<div id=groupC><input class="close" type="checkbox">
<div id=C class=main>info C</div></div>
Можете ли вы опубликовать один метод, который вы пробовали .... – Nofi
Есть ли способ сделать это с NoScript тогда? – Verpz
И нет, я не могу, я не беру на себя GitHub, что часто так жалко. @Coding ... – Verpz