cabellicar123 cabellicar123 - 1 year ago 62
HTML Question

Use CSS To Cause Hover On One Object to Affect Another

Using pure CSS I want an image to appear when hovering over text:


<h1 id="hover">Hover over me</h1>
<div id="squash">
<img src="" width="100%">


#squash {
display: none;

#hover:hover + #squash {
display: block;

This works fine unless I put something in between the
and the
. I know this is because of the CSS selector I am using (
). How could I use an event on one tag to cause a change in CSS on another?

P.S. Here's a jsfiddle:

Answer Source

You can use the General Sibling Selector ~ selector instead of the Adjacent Sibling Selector + selector, like this:

#hover:hover ~ #squash {
  display: block;


You can read more about different CSS sibling selectors here.