SCSS: When hovering over one div, display a different div

My goal is to display the elements in another div when hovering over a specific div. However, my current code does not seem to be working as expected. At the moment, there is no response upon hover and it remains non-responsive. I would greatly appreciate any advice or tips on how to fix this issue. Please note that I am only using HTML/React without any additional languages like JQuery. Thank you for your help!

HTML/React

<div className="parent">
    <div className="show-me">
        <Element />
    </div>
    <div className="hover-me">
        <span>hi</span>
    </div>
</div>

SCSS: 

.parent {
    .hover-me {
        @include icon('help', inherit);
        color: $b500-blue;

        span {
            font-weight: 700;
        }
    }

    .show-me {
        .show-me-body {
            opacity: 0;

        }
     }

     .hover-me:hover ~ .show-me .show-me-body {
         opacity: 1;
     }
}

The solution provided below works, however, I encountered difficulty implementing it with the element inside show-me. https://i.stack.imgur.com/1pdjs.png https://i.stack.imgur.com/0pyNT.png https://i.stack.imgur.com/3Rjh4.png

htmlcssreactjssass

Answer №1

To get the desired result, make sure to rearrange your HTML code. Place the .hover-me class before the .show-me class.

In the selector notation, .hover-me ~ .show-me targets elements with the class .show-me that come after elements with the class .hover-me.

<div className="parent">
<div className="hover-me">
<span>hello</span>
</div>
<div className="show-me">
<Element />
</div>

</div>

Check out the corrected snippet below:

/*UPDATED CSS STYLE*/

.parent .hover-me {
color: blue;
}
.parent .hover-me span {
font-weight: 600;
}
.parent .show-me .show-me-body {
display: none;
}
.parent .hover-me:hover ~ .show-me .show-me-body {
display: block;
}
<div class="parent">

<div class="hover-me">
<span>hello</span>
</div>
<div class="show-me">
<div class="show-me-body">Greetings</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

Adjusting the size of <nav> element to accommodate its child elements

I've exhausted all possible CSS solutions today in an attempt to make my parent nav tag home-main-nav-menu resize based on its children and grandchildren, but it just won't cooperate. If anyone could provide a clear explanation on how to solve th ...

javascripthtmlcss

Does using the HTML doctype result in adding extra whitespace?

Could someone provide an explanation as to why setting a doctype of <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> and <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> results in different rendering of the following ...

htmlfirefoxrenderingxhtml-1.0-strict

What is the best way to include PHP code within an HTML tag?

I need help figuring out how to display the value of a variable called 'fname' inside an HTML tag. Below is a snippet of my code where I'm trying to get the input value and print it in a paragraph tag. <?php if (isset($_POST['submit ...

phphtml

Getting field values from Firestore in a React application

Within my firestore document, I have three fields that store boolean values critical for subsequent processing. To access these boolean values in my program, I need to figure out how to read the fields of a document. This process should be straightforward, ...

javascriptreactjsreact-nativegoogle-cloud-firestore

Error in Next.js PDFtron Webviewer: ReferenceError - 'window' is not defined

Currently, I'm faced with a challenge in setting up a PDF viewer on my nextjs static page. Having recently ventured into Next.js, I'm seeking assistance from you guys to resolve this issue or suggest an alternative approach. While trying to imple ...

javascriptreactjsnext.jsreact-dompdftron

Struggling to grasp how to implement Redux and React-router together in one component

I have recently embarked on learning TypeScript and encountered a confusing behavior. Upon encountering this error: Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> ...

reactjstypescriptreact-router-redux

Prevent clicking on the <div> element for a duration of 200 milliseconds

I need to make this box move up and down, but prevent users from clicking it rapidly multiple times to watch it go up and down too quickly. How can I add a 200 millisecond delay on the click or disable clicking for that duration? View the jsfiddle example ...

javascriptjqueryhtmlcss

get direct access to the children of a specific div element

Here is the code snippet in HTML format. <div id="this"> <a href="xxx"> xx</a> <a href="yy"> yy</a> <a href="zzz"> zzz</a> aaa <a href="bbb"> bbb</a> ccc </div> I am look ...

jqueryhtmlnode.jsdomcheerio

What is the best way to anchor the components to a specific location on the screen in ASP.NET?

Currently I am working on creating a registration page in asp.net. I have been using panels to group the components such as labels, dropdown lists, and text boxes. However, when I run the page, I noticed that the positions of these components keep changing ...

javascriptasp.nethtmlcss

Managing numerous range sliders in a Django form

My Request: I am looking to have multiple Range sliders (the number will change based on user selections) on a single page. When the sliders are moved, I want the value to be updated and displayed in a span element, as well as updating the model. The Issu ...

javascriptjqueryhtmlcssdjango

Column with a set width in Bootstrap

Is it possible to create a fixed width right column in Bootstrap while keeping the left column responsive? I am currently working with Bootstrap 2.3.2 https://i.stack.imgur.com/xOhQo.png (source: toile-libre.org) I want the right column to maintain it ...

htmlcsstwitter-bootstraptwitter-bootstrap-2

Implementing Pagination in React using Material UI Framework

I am trying to implement pagination based on the length of an array, which is currently 2. Therefore, I need a total of 2 pages to display each array item per page. Can someone help me achieve this? View my solution on CodeSandbox Desired output: Page 1 ...

reactjsecmascript-6react-hooksmaterial-ui

Using bootstrap's center-block class, you can easily center

I'm attempting to center the content of a form. <div class="login-container"> <div class="center-block"> <form action="/joinChart" method="get"> <input name="username" id="username" type="text"><br><br> ...

htmlcss

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

React Hook Form is flagging missing dependencies in the useEffect function

Before posting this question, I made an effort to search for a solution on Google. However, I am puzzled by the warning that the linter is giving me regarding my code. The warning message reads: ./components/blocks/Contact.tsx 119:6 Warning: React Hook us ...

reactjstypescriptnext.js

Unwanted blank spaces are present within the grid layout

I'm currently working with Material UI and attempting to create a nested grid layout on my page, import React from "react"; import PropTypes from "prop-types"; import { withStyles } from "@material-ui/core/styles"; import Paper from "@material-ui/cor ...

reactjsmaterial-ui

After updating the package, webpack is unable to locate the module

I made a simple change to the package version in my package.json, ran npm install, and now I'm encountering an error when starting the webpack-dev-server that says "Uncaught Error: Cannot find module relative path at webpackMissingModule" Here's ...

reactjsnpmwebpacknode-modulesnpm-install

What is the best way to configure the parameters in React Router to avoid confusion with the static router?

Is there a way to configure the params in React Router to avoid conflicts with the static router below? Currently, when entering the static router, it seems to misunderstand the passed params! <AppRoute exact path="/:category/:slug" layout={PublicLay ...

reactjsreact-router

Struggling to retrieve information from a JSON file and display it within a component?

After accessing the JSON data and storing the necessary values in a dictionary named details, I am encountering an issue where the values are displayed when console logged from inside the function but appear as undefined when console logged in the parent f ...

javascriptreactjsjsonscopecomponents

Tips on aligning a v-btn alongside v-expansion-panels on the same row

Struggling with aligning my layout. Trying to get a single set of v-expansion-panels and a v-btn in the same row, both visually centered within a card. I managed to almost achieve it in this codepen: https://codepen.io/anzuj/pen/PoPPbdw with the following ...

cssvue.jsvuetify.js