0
То, что я пытаюсь достичь, - это сделать div видимым при наведении на изображение, а затем при наведении курсора на теперь видимый div (который был скрыт до наведения изображения), сохраняя его видимым, если указатель находится внутри вновь видимого div.Как сохранить содержимое div видимым при использовании смежного селектора Sibling
Прямо сейчас я добился того, чтобы div отображался на изображении, но как только появится div, и я навещу div, он еще раз не отобразится, я хочу, чтобы это произошло только при выходе из div (при мыши) ,
Появляется второй div, а затем, когда он перемещается по нему, он снова исчезнет, и мне нужно, чтобы он был виден во время наведения и только исчезал, когда указатель покидает этот div.
Я добавил код.
.hiddenbox {
display: block;
position:absolute;
left:20%;
top:30%;
visibility: hidden;
width:450px;
z-index:2;
opacity:0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
outline: 9999px solid rgba(255,255,255,0);
background:#fff;
}
#image {
z-index:1;
}
#image:hover~.hiddenbox {
opacity:1;
outline: 9999px solid rgba(255,255,255,0.4);
visibility: visible;
}
.hiddenbox:after, .hiddenbox:before {
right: 100%;
top: 20%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.hiddenbox:after {
border-color: rgba(255, 43, 79, 0);
border-right-color: #ff2b4f;
border-width: 10px;
margin-top: -10px;
}
.hiddenbox:before {
border-color: rgba(135, 126, 126, 0);
border-right-color: #877e7e
border-width: 0px;
margin-top: -16px;
}<div id="image"><img src="http://placehold.it/350x150"></div>
<div class="hiddenbox"><img src="http://placehold.it/200x100"></div>
Вы можете не сделать его дочерний элемент? –
@Leothelion Это не работает, потому что, паря над скрытым div, div появляется под изображением div, так что это не сработает. –
@PaulRedmond Да, он не должен быть дочерним элементом, но как он будет работать таким образом? –