Как можно игнорировать hover для пустых областей?

Question

Итак, мое понимание, которое демонстрирует приведенный ниже код, таково: hover имеет значение true для элемента блока, если мышь находится над областью, определенной для элемента, или над любым его переполненным содержимым или дочерними элементами.Обратите внимание, что .outer div становится синим, даже если он находится не над текстовым содержимым, в частности.

Однако мне пока не удалось выделить небольшой тестовый пример из чрезвычайно сложной страницы, что демонстрируетчто в некоторых случаях эффект: hover возникает только для содержимого, а пустые области элемента не приводят к включению: hover.

Это происходит как в Firefox, так и в Chrome.Таким образом, мой вопрос: какая особенность (я) заставляет игнорировать пустые области элемента div для эффектов наведения?Я не нашел ссылки в документах CSS на такие взаимодействия, начиная с описания функции: hover или любых других ссылок, которые я могу найти на: hover.

И другой вопрос будет,если есть какие-либо функции, которые вызывают такое поведение, будут соответствовать стандарту, или ошибка в браузерах?

.outer:hover { background: blue; }
.outer {
  font-size: 30px;
width: 10em; 
height: 2.7em;
overflow: visible;
z-index: 4;
}

<div>
Just some uninvolved stuff
</div><div class=outer>
<p class=inner>item 1</p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>

Answer 1

@ victoria Я пришел к решению, если нет высоты, дайте p float:left; clear:both;, а при наведении курсора на внешнем элементе абзац будет окрашен в синий цвет, который уберет пробел при наведении.

Надеюсь, это поможет!

 
.outer p{ float: left; clear:both;}
.outer:hover p{ background: blue; }

.outer {
  font-size: 30px;
width: 10em; 
height: 2.7em;
overflow: visible;
z-index: 4;
}

<div>
Just some uninvolved stuff
</div><div class=outer>
<p class=inner>item 1</p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>

Answer 2

.content:hover { 
background: #00c; 
color: #cff;
cursor: default;
padding:0.2em;
}
.outer {
  font-size: 30px;
width: 10em; 
height: 2.7em;
overflow: visible;
z-index: 4;
}

<div>
Just some uninvolved stuff
</div><div class=outer>
<p><span class="content">item 1</span></p>
<p class=inner>longer item 2</p>
</div>
<div>
<p>
Just some more uninvolved stuff
</p>
</div>

Следует помнить, что в отношении страниц CSS и HTML существует концепция блочной модели:

Блочная модель CSS описывает прямоугольные прямоугольники, которые создаются для элементов в дереве документа и размещены в соответствии с визуальным модель форматирования.

Подробнее здесь

Итак, если вы просто хотите, чтобы фон был синим над определенным текстом, вы можете нацелить этот текст с помощью тегов SPAN, а затем назначить класс, например, объединяя класс псевдо-наведения с .content , класс пары тегов SPAN, охватывающих «элемент 1». Обратите внимание, я позволил себе добавить некоторые другие вещи к событию при наведении, такие как изменение цвета текста и добавление небольшого отступа.

Если вы хотите навести курсор на элемент div, содержащий текстовое содержимое, а затем изменить только фон текстового содержимого и, возможно, цвета текста, вы можете использовать JavaScript для программирования этих изменений следующим образом:

    var divs = document.getElementsByTagName("div");
    var spans = document.getElementsByTagName("span");
    divs[1].onmouseover = function() {
        spans[0].style.backgroundColor = '#00c';
        spans[0].style.color = '#ccf';
    };

    divs[1].onmouseout = function() {
        spans[0].style.backgroundColor = '#fff';
        spans[0].style.color = '#000';
    };

    .outer:hover {
      cursor:crosshair;
    }

    .outer {
      font-size: 30px;
    width: 10em; 
    height: 2.7em;
    overflow: visible;
    z-index: 4;
    }

    <div>
    Just some uninvolved stuff
    </div>
    <div class="outer">
    <p><span>item 1</span></p>
    <p class=inner>longer item 2</p>
    </div>
    <div>
    <p>
    Just some more uninvolved stuff
    </p>
    </div>

Answer 3

Если я правильно понимаю, вам нужна та же синяя фоновая область при наведении, но только при наведении на текст «элемент 1».Для этого я бы использовал псевдоэлемент для создания цвета фона.Небольшое изменение, необходимое для HTML, добавьте новый уникальный класс к элементу «hover trigger:

<p class="inner trigger">item 1</p>

Затем удалите правило для .outer: hover и добавьте position: relative в div .outer, который будетслужить в качестве границ синего фона псевдоэлемента, который мы добавим:

.outer {
  // ...pre-existing CSS for .outer
  position: relative;
}

Теперь вы можете иметь абсолютно позиционированный псевдоэлемент с синим фоном, только при наведении курсора на элемент "item 1":

.trigger:hover:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: blue;
  z-index: 0;
}