Leverage CSS to create a hover effect on one element that triggers a change in another

Question

Leverage CSS to create a hover effect on one element that triggers a change in another

How can I use pure CSS to make an image appear when hovering over text?

HTML

<h1 id="hover">Hover over me</h1>
<div id="squash">
  <img src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%">
</div>

CSS

#squash {
  display: none;
}

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

While this method works well, it becomes complicated if anything is placed between the <h1> and the <div> due to the CSS selector used (+). Is there a way to trigger a change in CSS on one element based on an event in another?

JSFiddle

html css

Answer 1

Answer №1

If you want to replace the Adjacent Sibling Selector with the General Sibling Selector, use the General Sibling Selector ~. Here's an example:

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

Check out this JSFiddle for reference.

To learn more about CSS sibling selectors, visit this link.

Answer 2

If you want to replace the Adjacent Sibling Selector with the General Sibling Selector, use the General Sibling Selector ~. Here's an example:

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

Check out this JSFiddle for reference.

To learn more about CSS sibling selectors, visit this link.

Answer 3

Answer №2

Give it a go

<h1 id="hover">Hover over me</h1>
<img id="squash" src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%">

#squash {
  display: none;
}

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

Answer 4

Give it a go

<h1 id="hover">Hover over me</h1>
<img id="squash" src="http://askflorine.com/wp-content/uploads/2013/10/temp_quash.jpg" width="100%">

#squash {
  display: none;
}

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

Answer 5

Answer №3

It all comes down to what you insert between the two sections. If you enclose text about squash inside the

<p> include text here
    <div id="squash"...>
    </div>
</p>

This will result in changes to the CSS:

#hover:hover + p #squash {

Answer 6

It all comes down to what you insert between the two sections. If you enclose text about squash inside the

<p> include text here
    <div id="squash"...>
    </div>
</p>

This will result in changes to the CSS:

#hover:hover + p #squash {

Leverage CSS to create a hover effect on one element that triggers a change in another

Answer №1

Answer №2

Answer №3

Similar questions

Expand the div to fit the rest of the screen following the fixed-size navigation bar

What is a simple way to ensure that my image retains its square shape on a responsive design without having to use numerous media queries?

Troubleshooting Problem with CSS Background-Image in Safari

Is it possible to eliminate the border on an image input button?

How to display a three.js scene in the center of a container

Manipulating layout with html5 VIDEO controls

I want to set a single background image for all slides in fullPage.js. How can I achieve this

How to vertically align content using Zurb Foundation's equalizer feature?

Eliminate embellishments upon hovering over hyperlinks

Develop a versatile JavaScript or jQuery script that automatically sets the focus on the first input field within a div or tag when the user clicks on it

The Transformicons by Navicon featuring a stylish blue outline

Is there a way to modify the Javascript for this Contact Form to trigger a different action if a specific key is pressed instead?

What is the best way to close a popup window?

Creating a full-screen background image in React and updating it with a button

CSS: Alignment of Lists with Three Items

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Submit form data asynchronously using Ajax and serialize the form data before posting

Setting the position of a tooltip relative to an element using CSS/JS

Eliminate any trace of Bootstrap 4 design elements on the .card-header

Problem occurs when tab links vanish after clicking on another part of the website