Hover function not functioning properly

I can't figure out why this hover effect isn't working, there doesn't seem to be a negative z-index or anything like that. At most, it just flashes on hover;

.menu{
border-radius: 50%;
width: 100px;
height: 100px;
background: white;
box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
background-image: url("home.png");
background-repeat: no-repeat;
background-size: 60% 60%;
background-position: 20px 15px;
position: absolute;
z-index: 1;
}
.menucontent{
    height:100px;
    width: 400px;
    box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19);
    position: absolute;
    display:none;
}
.menu:hover .menucontent{
  display: inline;
}

https://jsfiddle.net/jwwhj9rr/1/

csshover

Answer №1

Solution 1

Here is one way to accomplish this task:

.menu:hover ~.menucontent {
  display: inline;
}

Refer to the following code snippet for implementation:

.menu {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: white;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
  background-image: url("home.png");
  background-repeat: no-repeat;
  background-size: 60% 60%;
  background-position: 20px 15px;
  position: absolute;
  z-index: 1;
}

.menucontent {
  height: 100px;
  width: 400px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
  position: absolute;
  display: none;
}

.menu:hover ~.menucontent {
  display: inline;
}
<div class="menu" style="left: 100px; top: 100px;"></div>
<div class="menucontent" style="left: 150px; top:100px;"></div>

Answer №2

.menucontent is positioned as a sibling to .menu, therefore it can be targeted using a sibling selector such as ~ or +.

.menu:hover + .menucontent {
  display: inline;
}


.menu {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: white;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
  background-image: url("home.png");
  background-repeat: no-repeat;
  background-size: 60% 60%;
  background-position: 20px 15px;
  position: absolute;
  z-index: 1;
}

.menucontent {
  height: 100px;
  width: 400px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
  position: absolute;
  display: none;
}

.menu:hover + .menucontent {
  display: inline;
}
<div class="menu" style="left: 100px; top: 100px; ;"></div>
<div class="menucontent" style="left: 150px; top:100px;"></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

How can you create a unique custom border for an image and display it on another image?

I am working towards achieving a specific output similar to the one shown in this https://i.stack.imgur.com/ejiYC.png image. Currently, I have successfully created the border section. Now, my next challenge is how to overlap images and apply borders as de ...

htmlcssimageborder

What strategies should be considered for styling AngularJS components?

Currently, I am engaged in a project using AngularJS with the intention of gradually organizing things for Angular 6 or whichever version is available when we begin the upgrade process. A significant part of this endeavor involves converting existing direc ...

cssangularjscomponents

Using JQuery to switch out images that do not have an ID or class assigned

Currently, I am using a Google Chrome Extension to apply an external theme to a website. Unfortunately, the logo on the site does not have an ID or class that can be used to call it. I am searching for a solution to replace it with a different image. My ...

javascriptjquerycssgoogle-chrome-extension

Eliminate any height changes in the ul element during a CSS transition

Here is the code I've been using to style my side navigation, which has been working perfectly without any transitions. SCSS Code and a functional JSFiddle .side-nav{ position: fixed; z-index: 100; right: 0; margin-top: 15vh; ul { lis ...

htmlcsssass

Adjust the header width and column alignment when freezing the header in a gridview interface

Looking to implement a gridview with a fixed header? I've tried various solutions including this link and this one. While I've managed to get it working, the main issue lies in the alignment of header width and column width. The scroll and freez ...

htmlcssasp.netgridview

Menu changes when hovering

I want to create an effect where hovering over the .hoverarea class will toggle the visibility of .sociallink1, .sociallink2, and so on, with a drover effect. However, my code isn't working as expected. Additionally, an extra margin is automatically ...

javascripthtmlcsshover

Adding dynamic content to CSS in Next.JS can be achieved by utilizing CSS-in-JS

Currently diving into the world of Next.JS, I've managed to grasp the concept of using getStaticProps to retrieve dynamic data from a headless CMS and integrate it into my JSX templates. However, I'm unsure about how to utilize this dynamic conte ...

cssnext.js

Tips for boosting the tabindex in a React search result list with ul-li elements

Implementing search results using ul li: <ul className="search-result"> <li tabindex="1">title here...</li> <li tabindex="2">title here...</li> <li tabindex="3">title here... ...

javascripthtmlcssaccessibility

Transitioning Dropdowns in Angular UI Bootstrap

Hello everyone, I am completely new to both Stack Overflow and AngularJS. I'm attempting to incorporate a fade-in animation into my dropdown (using UI Bootstrap's dropdown directive) without success. This issue is quite similar to the following ...

cssangularjsangular-ui-bootstrap

What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images i ...

htmlcssimage

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Using the CSS property scroll-snap-type: y mandatory; to customize my scrollbar with the following styles: ::-webkit-scrollbar { width: 12px; background: transparent; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5); -webkit-box-s ...

javascripthtmlcss

When the text is long, it does not extend all the way to the right

I am working on designing a login page and have created an input text field for the user's email address. However, I have noticed that when the email address is long, there is some space left at the end of the border (I suspect it may be due to paddin ...

htmlcss

Troubleshooting: HTML drop-down menu experiencing malfunctions

As a newcomer to the realm of HTML, I am eager to kickstart my online portfolio. After successfully setting up the navigation bar, I have now turned my focus towards creating a dropdown menu within the nav bar. Unfortunately, I've hit a roadblock as t ...

htmlcss

The JQuery code is failing to remove the dynamically added field when the delete icon is clicked

Information: I am currently navigating the world of programming and attempting to build a To-Do List feature. When the create list button is clicked, a dynamically generated div with the class 'wrap' is created. This div contains two nested divs: ...

jqueryhtmlcss

"Utilizing the flex box feature in IE 10 for efficient text trunc

.container { background: tomato; width: 100px; display: flex; } .text-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-right { } <div class=container> <div class="text-left"> title title title ...

htmlcssflexboxinternet-explorer-10

Bootstrap 3 with a dual sidebar layout positioned on the left side

I am currently working on a project where I need to create a fluid layout with a left sidebar. However, now I would like to add an expandable sidebar next to the existing one. Below is an image to illustrate my goal: Initially, the left sidebar contains a ...

jqueryhtmlcsstwitter-bootstrap

Basic HTML and JavaScript shell game concept

After spending several days working on this project, I am struggling to understand why the winning or losing message is not being displayed. The project involves a simple shell game created using HTML, JavaScript, and CSS. I have tried reworking the JavaSc ...

javascripthtmlcssshell

The art of masonry is not effective

I'm having trouble getting the Masonry cascading grid layout library to work in my code. Stylesheet: .post { background: #FFF; padding: 10px; border-bottom: 3px solid #e6e6e6; width: 30.7%; margin: 10px; } Source code: <div ...

javascriptjqueryhtmlcssmasonry

Incorporate CSS file into the head section or directly within the HTML section without the need for JavaScript

I'm facing an issue with adding a CSS file to my webpage using JavaScript code at the bottom of the page. When users disable JavaScript, the file cannot be added. Is there a way to include the CSS file in the page without relying on JavaScript? $(doc ...

javascriptjqueryhtmlcss

Empty HTML elements

Is there a way to create empty HTML tags, meaning tags that have no predefined styling or effect on the enclosed content or its environment? For example, <p> creates a paragraph, <b> makes text bold, and <div> forms a container. I am in ...

htmlcsstags