Display a DIV element when hovering over another DIV element using CSS or JavaScript without them being directly related as parent and

So I've figured out how to use CSS to show a hidden div when you hover over its parent. But what if the hidden div is not a child of the parent you want to hover on? How do you make it appear then?

For example:

<div class="field-1"></div>
<div class="field-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.</div>

In this JSFiddle http://jsfiddle.net/23u3rmx5/, hovering over the red block should reveal the .field-2 below it. You can't change the structure of the divs by moving .field-2 inside .field-1. That's not an option.

I appreciate any help or advice on this! Enjoy your weekend!

javascriptjqueryhtmlcss

Answer №1

If you encounter a situation where you need to target an element with the class .field-2, you can make use of the adjacent sibling combinator here.

Check out this example

.field-1:hover + .field-2 { display: block; }

Alternatively, if the .field-2 does not directly follow the .field-1, you can try using the general sibling combinator here instead:

View this other example

.field-1:hover ~ .field-2 { display: block; }

Answer №2

http://example.com/jsfiddle23u3rmx5/1/

$(".section-1").on("mouseover", function() {
    $(".section-2").show();
}).on("mouseout", function() {
    $(".section-2").hide();
});

For a different approach, consider utilizing Hashem's solution if you are confident that the DOM structure will not change in the future.

Answer №3

.element-1 {
    width: 150px;
    height: 150px;
    display: block;
    background-color: red;
}
.element-1:hover + .element-2{
   display: block;  
}
.element-2 {
    background-color: #ccc;
    display: none;
}

Answer №4

Check out this cool jQuery solution:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<script>
$('.element-1').hover(function(){
    $('.element-2').show();
  });
$('.element-1').mouseleave(function(){
    $('.element-2').hide();
  });
</script>

JSFIDDLE LIVE DEMO

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

The behavior of -webkit-border-radius differs from that of -moz-border-radius

My website is displaying differently on Safari compared to Firefox. I want the CSS to make it look consistent across both browsers. I understand that I could use two div boxes - one for the outline and one for the image. However, I prefer how Firefox only ...

safaricss

HTML5 Advanced API Integration with Vimeo

After setting up my Vimeo account and app for video upload, I received approval. However, when I attempted to upload a video to the Vimeo server, I encountered difficulties. I am struggling to understand how OAuth functions. Please see below for the co ...

jqueryajaxhtmlapivimeo

The compatibility between V-model and TinyMCE is unreliable

I've been working on integrating Vuejs and TinyMCE, using the @tinymce/tinymce-vue package for the Vue integration. I followed all the instructions and everything seems to be functioning properly - I can write, insert images... everything except for t ...

javascriptvue.jstinymceaxios

Is there a way to modify the maximum size limit for a POST request package?

I am encountering an issue while attempting to send an array of bytes using a POST request. In my server-side implementation, I am utilizing Node.js and Express.js. Unfortunately, I am receiving error code 413 or the page becomes unresponsive ('Payloa ...

javascriptnode.jsexpresshttp

Javascript behavior during execution can vary from what is observed during debugging

I'm currently facing an issue while trying to debug a script. Everything seems to work fine in debug mode, but not during runtime. Here's the JavaScript function causing trouble: function Add() { ... $('#Value').val($('#V ...

javascriptjqueryasp.net-mvc

What are the steps for incorporating information into a designated PhpMyAdmin account?

Currently, I am experimenting with HTML and Php. The website is quite simple at the moment and lacks adequate security measures. My objective is to update a specific user's competition field in the users table located within the authentication folder ...

phphtmlmysql

Erasing a comment creates empty spaces

I've encountered an issue with my idea whiteboard where removing comments leaves unwanted blank spaces between ideas. For example, if I have the following comments: But when I delete something: Is there a way to ensure that no gaps are left between ...

javascriptjquerynode.js

What is the importance of context in the subscription method of RxJS or Angular Observables?

In the given situations, I am providing a child Component with a property that is updated later through an RxJs Observable subscription. Angular fails to detect changes when not using an anonymous function or binding the this context. // Situation 1 // C ...

javascriptangularrxjs

Switching between different views in Angular UI-router by selecting one UI-view over another

On my page, I have set up 2 ui-views. The top view contains a form and some controls, while the bottom view initially displays a few tables but should change based on the user's actions in the top view. I chose to keep this initial setup within a sin ...

htmlangularjsangular-ui-router

Retrieve the element that is currently being hovered over within the same nested selector

I am facing a challenge in selecting the currently hovered element with a nested selector. The ".frmElement" class is used as the selector. When I hover over the ".frmElement" element at a certain level, all the previous selector elements display the hover ...

javascriptjqueryhtmlcss

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how to a ...

cssvue.jsimportrouter

Passing a deconstructed object as a parameter for a function

I'm having trouble understanding the parameter const Posts in the code snippet below. As a newcomer to node/React, I'm not sure if it's a destructured parameter object or just an object being passed as a parameter. The functions getPosts an ...

javascriptreactjsdestructuring

Delete an <li> element upon clicking a span tag

I've been attempting to fadeOut some <li> elements, however I haven't had any success. Here's my code below: <li class="lclass" id="1"> First Li <span class="removeit" id="1" style="color:#C00;">Remove</span> ...

javascriptjquery

Adjust the positioning of divs to account for changes in scale caused

I have 3 div blocks arranged on a web page, with the first one bigger and located on the left side while the other two smaller ones are positioned on the right side. I want their relative positioning to remain fixed across all browsers and zoom levels. Cur ...

csshtml

What is causing styled-components to include my attributes in the DOM?

In various parts of my code, there is a snippet like this: import React from 'react' import styled from 'styled-components' type PropsType = { direction?: 'horizontal' | 'vertical' flex?: number | string width ...

javascriptreactjstypescriptnext.jsstyled-components

Experiencing issues with ng-repeat in AngularJs?

I am currently facing an issue with two tables that are rendering data through AngularJS from two separate C# methods. Both tables have almost identical structures, with the first one being used as a search field and the second one to display names. The pr ...

javascriptangularjs

What is the best method for sending a user to a different page when a webhook is triggered by an external API in

In my project using NextJS and the pages router, I encounter a scenario where a user initiates a process through a form that takes approximately 30 seconds to complete. This process is carried out by an external API over which I have no control. Once the p ...

javascriptreactjsnext.jswebhooksreplicate

Instructions for showcasing a 404 error page in the event that a back-end GET request to an API fails due to the absence of a user. This guide will detail the process of separating the

I am currently working on an application that combines JavaScript with Vue.js on the front-end and PHP with Laravel on the back-end. When a GET request is made from the front-end to the back-end at URL /getSummoner/{summonerName}, another GET request is t ...

javascriptphplaravelvue.jsvuejs2

Using JavaScript to apply styling on images with overlays

I am currently facing an issue with placing an overlay on top of a background image. Despite my efforts, I am unable to get the background color to appear on top of the image. Any helpful suggestions on how to resolve this would be greatly appreciated. M ...

javascriptcssreactjsmaterial-ui

What is the method for generating dynamic objects from configuration data with Ext JS?

Working with Ext Js to develop a dynamic web application can be quite challenging. When making an AJAX call to fetch data from the server, it's often unclear what the data will be until it is received. While some examples suggest adding dynamic object ...

javascriptextjs