Вывод HTML-элемента на передний план с z-index при переполнении в CSS
Я пытаюсь сделать так, чтобы контейнер с синим прямоугольником имел больший размер z-index, чем другие поля, при наведении курсора на элементы, которые являются контейнером overflow.
У игры 3 здесь больший z-индекс, но я хочу получить доступ к Loserselect в синем кружке ниже, но не могу, если не наведу курсор обратно на синий прямоугольник, чтобы получить фокус.
Есть ли способ решить эту проблему, используя только CSS, или мне нужен JQuery?
Я создал скрипт, который может воспроизвести это, поэтому игнорируйте любые ошибки JS, поскольку фактическая страница требует довольно много включений, однако проблема остается неизменной. Наведите курсор на 4-ю игру, в которой есть три выпадающих списка: Источник, Пулы, Семена. Вы можете просто выбрать Seeds. Тем не менее, наведите указатель мыши на другую игру вверху, затем вернитесь к «Семенам», вы не сможете выбрать ее, если снова не наведете курсор на «Пулы». Мне нужно, чтобы «Семена» всегда можно было выбрать независимо от переполнения.
https://jsfiddle.net/cblaze22/qp4L15tj/8/
Текущий код для игры при наведении курсора (область синего прямоугольника)
.Forward помещает большой знак zindex в область синего прямоугольника.
$(element).hover(
function () {
if (!$(this).parent().hasClass('editing')) {
$(this).addClass('forward');
}
},
function() {
$(this).removeClass('forward');
}
);
Судя по тому, что я вижу в скрипке, элементы не перекрываются, так зачем вообще связываться с z-index? Это из-за невозможности воспроизвести макет без абсолютно позиционированных элементов? Имхо, это было бы подходящим вариантом - и вы не только уменьшили бы требуемую функциональность, но и в любом случае не столкнулись бы с какими-либо подобными проблемами.
Есть разница между скриншотом и ссылкой на скрипт.
Ответы 2
Если вы хотите, чтобы Seeds для всегда можно было выбирать, почему бы не всегда давать его родительскому элементу bracket-part высокий уровень z-index?
Прямо сейчас z-index находится на высоком уровне только после зависания bracket-part. Хотя Seeds технически является дочерним по отношению к bracket-part, он расположен вне него, поэтому, если выбор Seeds не зависает напрямую после зависания bracket-part, его нельзя будет выбрать.
Если вы добавите z-index: 10000; к родительским стилям Seeds bracket-part, Seeds всегда будет доступен для выбора:
<div class = "part bracket-part ui-draggable ui-resizable ui-draggable-disabled ui-state-disabled" data-bind = "bracketPartInit: { left: $data.left, top: $data.top, height: $data.height, width: $data.width, disabled: $root.members.bracket.disableDrag, minHeight: $data.minHeight }, css: { 'dash-top' : $data.dashedBorderTop(), 'dash-right' : $data.dashedBorderRight(), 'dash-bottom' : $data.dashedBorderBottom(), 'dash-left' : $data.dashedBorderLeft(), 'reverse-bracket' : $data.type() == 2, 'box-bracket': $data.type() == 13, 'bye': $data.bye()}" aria-disabled = "true" style = "top: 459px; left: 0px; height: 80px; width: 150px; z-index: 10000;">
На всех остальных частях кронштейна тоже есть семена, так что это не сработает.
Насколько вы ограничены изменением кода? Можете ли вы изменить порядок элементов в вашем коде? Так, например, элемент один переключает положение с элементом два. Это не повлияет на его внешний вид, поскольку это тот же код в другом порядке. Дай мне знать, если сможешь.
@MikeFlynn Я предлагал просто добавить свойство z-index: 1000; непосредственно к элементу как встроенный стиль, а не общее изменение CSS, которое применимо ко всем bracket-part (см. Мой фрагмент кода)
На самом деле это было на удивление простым решением, если вы поняли структуру и реальную проблему. Div, покрывающий div. Сначала вы отключите все события щелчка для всего в .bracket-part, поскольку они не нужны. Затем вы добавляете события щелчка обратно в выборку. Чтобы сделать его более универсальным для более легкого использования, вы можете просто изменить select в селекторе CSS на класс .re-enable-events или что-то в этом роде. JS о z-index на самом деле не понадобился.
#bracket-wrapper .bracket-part select {
pointer-events: all !important;
}
#bracket-wrapper .bracket-part {
pointer-events: none;
}
См .: https://jsfiddle.net/uws8pf1y/
Указатель событий имеет очень хорошую совместимость, поэтому это решение должно работать практически на всех устройствах.
Я пробовал это, но не часть дочернего селектора, большое спасибо!
Пожалуйста, предоставьте образец кода.