У меня есть веб-страница, созданная с помощью svelte, и я пытаюсь создать своего рода всплывающую подсказку для элемента div, который должен отображаться при наведении курсора.
Поэтому я написал следующее:
<div
class="test"
style="background-color: {testcase.failure ? 'red' : 'green'}"
on:mouseenter={() => (testcase.mouseover = true)}
on:mouseleave={() => (testcase.mouseover = false)}>
{#if (testcase.failure && testcase.mouseover)}
<div class="failure">
<div class="name">{testcase.class}:{testcase.name}</div>
<div class="error">{testcase.failure}</div>
</div>
{/if}
</div>
и это работает в том смысле, что failure div отображается только при наведении курсора. Однако, это, конечно, показано под всеми элементами, которые "после" этого в DOM.
Так что я добавил z-index к failure, но он ничего не делает. Он по-прежнему отображается под всем, несмотря на гораздо более высокий z-индекс.
После экспериментов я понял, что если я удаляю оператор if и simple всегда отображает failure div, то это "правильно"отображается поверх всего остального.
Это кажется мне очень странным, и я не могу понять, почему это происходит. У кого-нибудь есть хорошее объяснение этому? (Я знаю, что, вероятно, всегда могу отобразить его и просто изменить непрозрачность или что-то подобное, чтобы получить тот же эффект, но мне любопытно узнать причину)