Вот этот раскрывающийся список из W3Schools, который, кажется, работает после моих правок Ссылки: 1 К сожалению, другой элемент <div> блокирует его, и .dropdown:hover не работает. 2
Это произошло, когда я красиво разместил значок раскрывающегося списка внутри другого div 3 , и это также происходит из-за того, что блокирующий блок div должен находиться слева от раскрывающегося списка.
(Я пытаюсь заставить работать наведение: параметры раскрывающегося списка должны появляться при наведении курсора на значок меню .)
Сначала я установил ширину 75%. Но, как ни странно, это не сработало (я все еще сохранил его)
Я пробовал изменить z-index всего:
- Блокировка div / параграфа: -2
- Контейнер, включая раскрывающийся список: -1
- Раскрывающийся список: 1
Через некоторое время я увидел, что z-index применяется только к элементам с css position: absolute, relative, fixed, sticky
Но установка position: relative не сработала. †
Я также узнал о pointer-events: none; из этого другого вопроса , но, к сожалению, ничего. †
В Chrome Developer Tools было оранжевое поле, закрывающее раскрывающийся список.
Я установил поле на 0 и сделал границу div и видимый абзац. Как-то раскрывающийся список все еще не открывается. Я не понимаю, почему это не так - и консоль Chrome больше не показывает оранжевый цвет.
Также я испортил свойство CSS display. По умолчанию это блочный элемент, занимающий всю ширину. 4 Inline не влияет на свойства высоты и ширины. И большинство других основаны на блочном и встроенном (или табличном), но я все же пробовал (и они потерпели неудачу) их.
К сожалению, все они терпят неудачу довольно тихо, за исключением случаев, когда я превратил блокирующий div в элемент span, в котором все рухнуло.
Фрагмент кода ( Инструкции: 5 )
function menu(text) {
// respond
console.log(`Click success: ${text}`)
}
// 4 seconds to hover over the menu icon
setTimeout(function() {
document.getElementById("storyDiv").style.marginTop = "10%"
}, 4000)
#gameMenu {
color: red;
}
#storyDiv {
position: relative;
display: inline-block;
width: 75%;
height: 75%;
margin: 0;
overflow-y: auto; /* Makes it scrollable if the text is too big */
border: 1px solid blue;
z-index: -2;
pointer-events: none;
}
#story {
margin: 0;
position: relative;
z-index: -2;
pointer-events: none;
border: 1px solid orange;
}
/* Edited dropdown from https://www.w3schools.com/howto/howto_css_dropdown.asp */
.dropdown {
position: absolute;
top: 10px;
right: 10px;
display: inline-block;
z-index: 1;
}
.dropdownContent {
display: none;
position: absolute;
top: 10px;
right: 10px;
min-width: 160px;
z-index: 1;
}
.dropdownContent button {
padding: 12px 16px;
font-size: 16px;
border: none;
display: block;
}
.dropdown:hover .dropdownContent {
display: block;
}
/* End of dropdown */
#infoContainer {
position: absolute;
top: 10px;
left: 76%;
width: 23%;
border: 1px solid dodgerblue;
z-index: -1;
/* [Result] text in the top-right corner blocks the menu,
Also for the demonstartion */
margin-top: 10%;
}
#playerInfo {
margin-top: 0;
}
<head>
<!-- Menu symbol -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id='storyDiv'>
<p id='story'>
With i (color), em, ul, and li tags. As well as <br>br, and enough to expand the bottom-border enough so that it's visually below the menu icon, blocking it.<br>
</p>
</div>
<div id='infoContainer'>
<div class='dropdown'>
<span class="material-icons" id='gameMenu'>menu</span>
<div class='dropdownContent'>
<button onClick='menu("Instructions")'> Instructions </button>
<button onClick='menu("Settings")'> Settings </button>
<button onClick='menu("Credits")'> Credits </button>
</div>
</div>
<div id="playerInfo">
<p>Another div with other stuff in it.</p>
</div>
</div>
</body>
https://www.w3schools.com/css/css_dropdowns.asp и https://www.w3schools.com/howto/howto_css_dropdown.asp (не обязательно понимать это)
Выпадающий список находится в div, поэтому изначально я думал, что он был заблокирован им или одним из других элементов в div.
Он перекрывался с (границей контейнер div), что видно из соображений эстетики c. Никакого удаления. Ну, изначально значок был в верхнем левом углу, но это было навязчиво из-за приключенческой истории в <p>, о которой я говорил.
https://www.w3schools.com/cssref/pr_class_display.asp
При щелчке по кнопке «запустить» наведите указатель мыши на красный значок меню. Выпадающий список работает. Отключите мышь и подождите, пока рядом с div меню не появится поле. Наведите указатель мыши на раскрывающийся список. Теперь не работает
† Я перепробовал все (насколько мне известно) комбинации для (этого). Только <p>, только <div> или оба варианта не работают.
Другие примечания: Я просто хочу заставить работать наведение, и мне не нужен содержимое для изменения позиции.