how can :hover be ignored for blank regions? - css

Question

So my understanding, which is demonstrated by the code below, is that :hover is true for a block element if the mouse is over the area defined for the element, or over any of its overflowed content or children. Note that the .outer div turns blue even if it is not over the text content, in particular.
I haven't yet been successful in isolating a small test case from an extremely complex page, however, which demonstrates that in some cases, the :hover effect only happens for the content, and the blank areas of the element do not cause :hover to be enabled.
This happens in both Firefox and Chrome. So my question is, what feature(s) causes blank regions of a div to be ignored for :hover effects? I haven't found reference in the css documents to such interactions, neither by starting at the description of the :hover feature, or any other references I can find to :hover.
And the other question would be, if there is some feature(s) that causes such behavior, would be conformant to the standard, or a bug in the browsers?
.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 I came to a solution, if there is no height give p float:left; clear:both; and hover on outer should make paragraph color blue that will remove white space hover.
Hope this will help !
.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

If I understand correctly you want the same blue background area on hover but only while hovering on the "item 1" text. For this I would use a pseudo element to create the background color. One minor changes needed to the HTML, add a new unique class to the "hover trigger element:
<p class="inner trigger">item 1</p>
Then remove the rule for .outer:hover and add position: relative to the .outer div that will serve as the bounds of the blue background pseudo element we will add:
.outer {
// ...pre-existing CSS for .outer
position: relative;
}
Now you can have an absolutely positioned pseudo element with the blue background, only on hover of the "item 1" element:
.trigger:hover:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: blue;
z-index: 0;
}

Answer 3

.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>
The thing to remember is that with respect to CSS and HTML pages, there is a concept of a box model:
The CSS box model describes the rectangular boxes that are generated
for elements in the document tree and laid out according to the visual
formatting model.
See more here
So, if you just wish the background to be blue over specific text, you can target that text with SPAN tags and then assign a class, such as combining the pseudo hover class with .content, the class of the pair of SPAN tags enveloping "item 1". Note, I took the liberty of adding some other things to the hover event, such as also changing the color of the text and adding a little padding.
If you mean to hover over the div containing the text content and then have only the text content background and possibly text colors change, you could use JavaScript to program these changes, as follows:
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>