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

htmlcss

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 №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 {

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing jQuery 3 from recognizing the '#' symbol in an attribute selector?

After updating my application to jQuery 3, I encountered an issue during testing. Everything seemed to be working fine until I reached a section of my code that used a '#' symbol in a selector. The jQuery snippet causing the problem looks like th ...

javascriptjqueryhtmldomjquery-selectors

Instructions for retrieving data from a weather API using JavaScript

Hello amazing Stackoverflow community! I need your help to figure out how to extract data from a weather REST API using JavaScript. I'm struggling to fetch the weather condition and date/time information from this API. { info: { _postman_i ...

javascripthtmlcssnode.js

Removing the gap between the clicked point and the draw point in Html5 canvas

To better understand my issue, please refer to the image linked below: In the image, you can see that when I scroll down and click on the canvas to point a position, it creates space between the clicked point and where the line is drawn. Below is the cod ...

javascriptjqueryhtmlcanvas

Tips for visually conveying the values of x and y using SVG symbols

I recently came across a blog post discussing the use of SVG symbols for icons, which inspired me to create representations of symbols using svg files. The original svgs I used had properties like x, y, height and width. However, when I tried adding these ...

htmlcsssvg

Highlight.js is not able to display HTML code

It's strange, I can't seem to get the HTML code to display correctly. This is my HTML: <head> <link rel="stylesheet" href="/path/to/default.css"> <script src="/path/to/highlight.pack.js"></script> <script& ...

javascripthtmlhighlight.js

Is it possible to combine two conditions using CSS?

Hello, I have a question about CSS. In my navigation bar, I have 3 links with different styles: #p1 { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 45px; font-weight: bolder; color: #999999; text-dec ...

htmlcsscss-selectors

100% width is applied to the table cell within the div element

Below is the code I am working with: <div style='display: table'> <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div> </div> I'm ...

htmlcss

Shifting the placement of a button with the help of bootstrap

Having a bit of trouble trying to adjust the position of a button inside an input field using bootstrap. The button appears centered within the form field, but I need it to be slightly shifted to the right for design consistency. https://i.stack.imgur.com ...

csstwitter-bootstrap

Including the HTML Doctype to center child elements within the <td> tags specifically for Internet Explorer

This issue seems to be isolated to Internet Explorer. I have conducted tests using IE7, IE8, and IE9. Interestingly, when I remove the html doctype, the td tags are aligned to the left. However, upon adding any standard HTML4 or 5 tags, the text and input ...

htmlcssinternet-explorer

Troubleshooting CSS Problems: Issues with background repeating and footer placement

I am currently in the process of transitioning my website to a CSS layout, and so far it's looking good. However, I am facing two specific issues with the page layout that I need help with: 1) The background image of the left-most column is not repea ...

htmlcss

The Push Over Menu is malfunctioning and not functioning properly

I am facing an issue with pushing my menu along with the content to the right. The JS code I have is not working as expected. When I click on <div class="menu-btn toggle"></div>, the menu does not trigger. Can someone help me understand why thi ...

javascripthtmlcss

"Submitting an HTML form and displaying the response without redirecting to a

I created a basic portlet for Liferay that includes a form for inputting parameters to send to an external webservice. However, when I submit the form, I am redirected to the URL of the webservice. Is there a method to prevent this redirection and instead ...

htmlhttppostliferayportlet

Avoiding redirection in Django template form

Currently, I am facing a challenge with my application that involves rendering a Django Template model form where images are referenced from another model. To manage the addition and deletion of images for this other model, I have implemented a button wit ...

javascripthtmldjangoformsdjango-templates

Updating the design of mui stepper icon

Is there a way to change the color of this icon from I would like it to be this color: I have tried using .Mui-disabled but it didn't work, not sure if it's .Mui-active or .Mui-completed Here is the sandbox link for reference: https://codesan ...

cssreactjsmaterial-uistepper

Is there a way for me to determine if a user has engaged with a form?

I'm surprised by how difficult it was to find information on this topic through Google. Currently, my struggle lies in wanting my form fields to change color based on validity only after the user has interacted with the form. I don't want invali ...

htmlcss

What could be causing the flex item to be wider than its container?

One issue that can arise when utilizing flexbox is the scenario where, as demonstrated below, the content exceeds the width of the viewport causing the flexbox items to become wider than their container. What are the factors contributing to this situat ...

cssflexbox

I am attempting to adjust the CSS code so that it does not shrink when clicked on. How can I prevent this from happening?

Here is the element I am attempting to modify. I attempted &:active { flex:7;} but upon releasing the left click button, it reverted back to its original size. I was aiming for something similar to this <h1>Gallery</h1> < ...

htmlcssanimation

Discrepancy detected in AGM Map printout

When attempting to print my Angular AGM Map from Chrome, I noticed a large grey gap in the map. This gap is visible even when "background graphics" are turned off and it causes the map image below it to shift downwards. If you want to reproduce this issue ...

cssangulargoogle-maps-api-3printingangular-google-maps

At what point does the browser begin fetching the background images specified in a stylesheet?

Are images mentioned in a valid CSS declaration with a background-image value downloaded when the stylesheet is parsed or when the declaration is applied on a page? In simpler terms, do I need to download all background images listed in my stylesheet even ...

cssperformance

Is there a way to incorporate the use of quotation marks within the ng-bind directive in AngularJS?

Is there a way to insert phoneNo["phoneno"] into an HTML input using the ng-bind directive in Angular? While {{phoneNo["phoneno"]}} can display the data, it results in a syntax error when I try to put it like this: <input class="form-control" type="t ...

htmlangularjshtml-inputng-bind