Элемент больше не перемещается, когда он установлен на display: none, так как он больше не занимает место. Элемент скрыт в Firefox, но он появляется немедленно, так как он больше не доступен для поиска, когда не отображается.
Решение 1. Заголовок не виден, но занимает место
Одно решение для эта проблема будет использовать вместо opacity. Таким образом, элемент по-прежнему занимает место и может находиться над ним.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
h1.hidden:hover {
opacity: 0;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>
</body>
</html>
Решение 2. При наведении курсора курс не занимает места
Если вы хотите, чтобы h1 больше не занимал пространство, вы можете создать div на заднем плане для определения зависания, и он должен иметь абсолютное или фиксированное положение.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
/* select size of hover area and allow elements to overlay */
div.hide {
border: 1px dashed #ccc; /* for previewing boundary (optional) */
position: absolute; /* allow elements to overlay */
height: 38px;
width: 100%;
}
/* hide h1.hidden appearing directly after div.hide */
div.hide:hover + h1.hidden {
display: none;
}
</style>
</head>
<body>
<h1>This is a visible heading</h1>
<div class="hide"></div>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>
</body>
</html>