Show a div using CSS when hovering over a different div with a separate parent element

I am attempting to modify a display property upon hovering over another div.

.pc-hover {
  display: none;
}
.pc-content-image img:hover + .pc-hover {
  display: block;
}
<div class="profile-content">
  <div class="pc-hover">{hover}</div>
  <div class="pc-header">{head}</div>
  <div class="pc-content">
    <div class="pc-content-image">
      <img src="https://via.placeholder.com/300" alt="placeholder" />
    </div>
    <div class="pc-content-text">
      <p>{text}</p>
      <p>{text2}</p>
    </div>
  </div>
</div>

Initially, the pc-hover element remains hidden until the mouse hovers over the image within the pc-content-image div. However, nothing occurs when I hover over the image.

I have looked into resources like Using only CSS, show div on hover over another element, but I am unsure how to implement it.

I have tried using both + and ~, but with no success.

Is there a method to accomplish this? Any assistance would be greatly appreciated, thank you.

htmlcss

Answer №1

There are a couple of issues to address:

  1. The adjacent sibling operator (+) will only be effective if the sibling element appears after the hovered element in the HTML source. To resolve this, I rearranged the elements so that the image div comes below the other div in my example.

  2. Currently, you are applying the hover event to the img element which is nested inside a div. Since this image does not have any adjacent siblings, your CSS won't take effect. To make it work, we need to listen for the hover on the parent div.pc-content, as it is actually the adjacent sibling of div.pc-hover.

If there isn't a "preceding sibling operator" in CSS, you may need to utilize flex and apply flex-direction: column-reverse (for instance) to position the hidden div correctly below the image in the source but above it in the output.

.pc-hover {
  display: none;
}

.pc-content-image img:hover {       
  cursor: pointer;
  border: 1px solid red;
}

.pc-content-image:hover + .pc-hover {
  display: block;
  height: 10rem;
  background: red;
  margin-bottom: 1rem;
}
<div class="profile-content">
  <div class="pc-header">{head}</div>
  <div class="pc-content">
    <div class="pc-content-image">
      <img src="https://via.placeholder.com/100" alt="placeholder" />
    </div>
   <div class="pc-hover">{hover}</div>
    <div class="pc-content-text">
      <p>{text}</p>
      <p>{text2}</p>
    </div>
  </div>
</div>

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

Adjust the current jQuery code to update the URL as the user scrolls

I have a jQuery code from w3schools.com that changes the URL's #id and enables smooth scrolling to a specific DIV section when clicking an <a href="#id"></a>. However, it does not work on scroll. I am looking for a solution where the URL&a ...

javascriptjqueryhtmlcss

Input field modified upon focus

I am currently using selectize js in my section to create a select box. My goal is to make the input editable after selecting an option when it is focused on. Check out the live demo: live demo HTML <label>Single selection <select id=" ...

javascripthtmljqueryselectize.js

creating a new page upon clicking a div element

I need assistance in creating an effect similar to the one found on this website - where clicking on a div opens a new page. ...

jqueryhtmljquery-uidom

Creating an HTML form that allows for multiple entries without the need for JavaScript serialization

I'm in the process of creating a straightforward form that allows users to add multiple photos before uploading. Right now, I'm manually generating an object using JavaScript. var objArr = []; for(var i = 0; i < arrayOfInputs.length; i++){ ...

javascripthtml

Remove a div using JavaScript

My approach involves dynamically adding div elements using JavaScript in the following manner: <div id="detail[0]"> <input name="detail.Index" type="hidden" value="0" /> <input name="detail[0].details_name" type="text" /> ...

javascriptjqueryhtml

Text that is aligned to the center and justified in its presentation

Can anyone assist me with this issue? I'm having trouble understanding why my text is justified but not centered. It appears fine on larger screens, but on the iPhone screen, it is justified yet slightly off-center to the left. How can I center the te ...

htmlhtml-table

Customize CSS class in ASP.Net

Here's the CSS code I am currently using: LinkButton:hover { color:White; background-color:Gray; } .myClass { color:Blue; } The issue I'm facing is that I have a LinkButton with the CssClass .myClass, and when I hover over it, the b ...

asp.netcsshoverstylesheet

Storing a selected value in the database using Laravel Blade

Attempting to save information from a select field to the database. Tested this method: <div class="form-group"> <label>Type</label> <input style="width:10%" type="text" name="type" class="form-control" value="{{$findBook-& ...

htmllaravelbootstrap-4laravel-blade

Having trouble finding two p-col-6 elements side by side in the PrimeNG FlexGrid with Angular?

I have integrated Flex Grid into my Angular7 project. In the initial state, I am able to display two p-col-6 elements side by side without any issues. However, when I try to rearrange them in p-col-12, they no longer align properly. Here is a detailed expl ...

htmlcssangulartwitter-bootstrapprimeng

An effective method for cutting off text while preserving HTML styling using jQuery

Is there a way to truncate text using jQuery while preserving the HTML formatting? I attempted the code below, but it doesn't maintain the HTML tags. var truncate = function() { $('p.truncated').text(function(index, oldText) { if (old ...

javascriptjqueryhtmltruncate

How to Create a Bootstrap 4 Fixed Bottom Navigation with a Dropup Feature?

After thoroughly researching the site, I have not found a solution that works with this particular approach. In order to create the following template, I utilized Pingendo. .dropup .dropdown-menu { top: auto; bottom: 100%; margin-bottom: .125rem; ...

htmlcsstwitter-bootstrapbootstrap-4

js include exclude switch a category

Although this question has been asked before, I have a query on completely removing an "id" from an element. Let's consider the following scenario: <div id="page"> some content here </div> I want to eliminate the "id" attribute from the ...

javascriptjqueryhtmlcss

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

javascripthtmlcss

What advantages do CSS pre-processors (SASS, SCSS, LESS) bring to the table for creating Responsive Web Designs?

Currently, I am embarking on a Responsive Web Design (RWD) project and contemplating whether integrating LESS would streamline the process. Are there practical benefits to utilizing CSS preprocessors for RWD projects? I suspect that employing media qu ...

cssresponsive-designless

Python script that utilizes BeautifulSoup to parse and select HTML code

@bot.event async def on_message(message): response = requests.get(f"https://steamid.io/lookup/" f"{on_message}") steamid = BeautifulSoup(response.text, "html.parser") print(steamid.prettify()) Upon ...

pythonhtmlbeautifulsoup

Is there a way in JavaScript to launch a link in a new tab and overlay a div on top of the existing content of the page?

Is there any method in JavaScript to open a link in a new tab and add a div element on that page? Let's say I have a page called page1.html which has a div containing a link and two radio buttons "yes" and "no". I want to open the link in a separate t ...

javascripthtmljqueryhyperlink

illuminate selected row in datatable using a jquery plugin

My data is displayed using the jQuery plugin DataTable, and everything appears to be working well. I am retrieving my data from PHP using AJAX. However, I encountered an issue when trying to highlight the row that was hovered over while navigating around ...

jquerycssdatatable

Is the Spring MVC ModelAndView object being returned?

After clicking a link on a jsp page, I have a GET method that is instantiated as: HTML: <div class="panel accordion clearfix" id="dispdir"> <script type="text/javascript"> window.onload = function() { //showDirectorySe ...

javascripthtmlspringmodelandview

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...

cssreactjstypescriptnext.jsvercel

Pressing the enter key in the input field will cause the multistep progress bar to update its

When I press Enter in each input field, I want the multi-step progress bar to dynamically update by adding the 'is-active' class to the next list item and removing it from the previous one. How can I achieve this using jQuery? ...

jqueryhtmlcss