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

jquery code to show/hide all elements

My webpage contains multiple content tabs with expand/collapse icons in each panel. To simplify the process of closing all expanded sections, I have included buttons for expanding and collapsing all panels at once. While this feature is functioning correc ...

jqueryhtmlcss

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

While we are familiar with pseudo-classes like :before and :after, have you ever wondered why there is no nav ul li a:left or :right? Do you think it's achievable? I'm open to using HTML5, CSS3, and JavaScript to make it happen. ...

javascripthtmlcss

Is there a way to relocate the play again button below the box?

How can I ensure that my "Play Again" button moves up to align perfectly under the black border box? The black border box is styled with a class named .foot .button { background: rgb(247, 150, 192); background: radial-gradient(circle, rgba(247, 1 ...

htmlcss

Dynamic background featuring a tall vertical image

I have an image that is extremely long, measuring 2263 x 8192 pixels. I want to design a website with a background that spans the width of the window and the full height of the image, all while maintaining responsiveness. The concept is to have this elong ...

jqueryhtmlcssimage

Apply the `text-overflow: ellipsis` property to truncate the text of two items within a flex column, which is contained within

I am attempting to accomplish the following: Successfully implementing ellipsis for a single item is achieved with: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, my challenge lies in truncating two items. One should appear be ...

css

tips for expanding the size of your images

Hey there, I'm looking for some help with the code below. I need to increase the width of the images and remove the border of the slider div which is currently showing a white border that I want to get rid of. I am using JavaScript to display the imag ...

jqueryhtmlcss

What is the standard way elements are displayed within a box that is positioned absolutely?

My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...

css

Reducing the Size of Sprite Images on Websites

I am working on a web page that contains an image file called sprites.png. This file holds multiple images within it. Specifically, there is one image in the file that is 48px x 48px. In my CSS, I am referencing this image like so: .cell-back { height:3 ...

htmlcss

What steps should be taken to acquire the most recent CSS files for a theme?

We are facing an issue with implementing a versioning system for our CSS files. Currently, we append a build number to the CSS link programmatically (e.g. \themes\ssss\abc.css?1011) so that clients always receive the latest CSS files with ea ...

asp.net.nethtmlcss

"Utilizing React's useState feature to dynamically update numerous dropdown components

Here is a React component snippet: const [show, setshow] = useState(false); const handleShow = () => { setshow(!show); }; Accompanied by the following CSS styles: .show { display: block; } .dropdown_content { padding: 3px; display: none; po ...

cssreactjs

css center arrow-aligned underline text

Trying to emphasize my text with an additional arrow centered on the line is proving to be a challenge. When attempting this, the text does not align in the center of the page. .souligne { line-height: 17px; padding-bottom: 15px; text-transform: u ...

csstextunderline

Div element positioned outside of another div element

I hate to bug you with more css issues, but I'm really struggling with this one. The problem I'm facing is that a sub div is overflowing the boundaries of its parent div. I tried using: display: inline-block;` but then the outer div goes haywir ...

htmlcss

Make the inner div fill the entire width within a container of a fixed width

On my blog page, I am currently using the col-md-8 class. Inside this column, my content is displayed. However, I want to stretch a particular div to occupy the full width within the col-md-8. Here is the section of my code: https://i.stack.imgur.com/uPS5 ...

htmlcsstwitter-bootstrapbootstrap-4

Using Rails to reference an image in CSS

My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3. In my .css(.scss) code, the ...

cssruby-on-railsrubyamazon-s3sass

Conceal the background of the lower div when the top div is displayed

I am struggling to figure out how to achieve this, or if it can even be done: <body> has a background image <div parent> has a background image <div child></div> does not have a background </div> My goal is to make the chi ...

htmlcss

Differentiating the appearance of an HTML datalist with color alterations

Is there a way to customize the color of the datalist element (black box shown in the image)? https://i.stack.imgur.com/GGJQ3.png https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist EDIT: The default color is set by the system, although ...

htmlcss

Display the background-image of the <body> element only when the image has finished loading

I have a webpage where I want to delay showing a large image until it has finished downloading. Instead, I would like to display a background with a fading effect while the image loads. The challenge is that the background image must be set within the bod ...

jqueryhtmlcsshidebackground-image

What is the best way to conceal text while retaining icons on a compact screen?

How can I hide the text links for Home, Reservations, My Reservations, About, and Settings on smaller screens while still keeping the icons visible? Currently, I am using the following resources: http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.1 ...

htmlcssangularjsangular-ui-bootstrap

The appearance of my HTML website varies significantly across different devices used by viewers

It's frustrating to see that my HTML website appears differently on various devices. While it looks perfect on mine, my friend is facing issues such as containers being out of place and images not loading properly. I really need to figure this out as ...

htmlcssbootstrap-4

The conflict between Material UI's CSSBaseline and react-mentions is causing issues

Wondering why the CSSBaseline of Material UI is causing issues with the background color alignment of React-mentions and seeking a solution (https://www.npmjs.com/package/react-mentions) Check out this setup: https://codesandbox.io/s/frosty-wildflower-21w ...

javascripthtmlcssreactjsmaterial-ui