Although you can't select parent elements with CSS, you may be able to accomplish the task with another method.
You want the background color of the parent to change when a child is hovered.
Consider using the spread-radius
value of the CSS box-shadow
property.
By creating a huge spread radius, you can change the color of the surrounding area (which is no different visually than the parent element).
div {
overflow: hidden; /* 1 */
}
a:hover {
box-shadow: 0 0 0 1000px red; /* 2 */
}
/* non-essential decorative styles */
div {
height: 150px;
width: 150px;
border: 1px dashed black;
display: flex;
justify-content: center;
align-items: center;
}
<div>
<a href="http://www.stackoverflow.com/">Anchor Text</a>
</div>
Notes:
overflow: hidden
to limit child's box shadow
- the
box-shadow
values are as follows:
<box-shadow> : <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
- offset-x ~ horizontal distance from element
- offset-y ~ vertical distance from element
blur-radius
~ makes the shadow increasingly bigger and transparent
spread-radius
~ makes the shadow expand (without fading)
In this case, the first three values don't matter.
What you need is for the spread-radius
to grow a lot, then have it clipped by the container with overflow: hidden
.
And what if there's another element in the container?
<div>
<h2>Hello</h2>
<a href="http://www.google.com">Anchor Text</a>
</div>
div {
overflow: hidden;
}
a:hover {
box-shadow: 0 0 0 1000px red;
}
div {
height: 150px;
width: 150px;
border: 1px dashed black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div>
<h2>Hello</h2>
<a href="http://www.stackoverflow.com/">Anchor Text</a>
</div>
You can apply a z-index
to the sibling.
h2 { z-index: 1; }
And, because the elements happen to be in a flex container in this example, they don't need to be positioned for z-index
to work.
h2 { z-index: 1; }
div {
overflow: hidden;
}
a:hover {
box-shadow: 0 0 0 1000px red;
}
div {
height: 150px;
width: 150px;
border: 1px dashed black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<div>
<h2>Hello</h2>
<a href="http://www.stackoverflow.com/">Anchor Text</a>
</div>