"Hovering over one div does not trigger the display of another div

I seem to have forgotten my CSS skills, but I am facing an issue.

Here is the code snippet:

   <div class="footer_container">
     <div class="website_logo_to_footerexpand"></div>

     <div class="info_cont">
       <div class="info_slide_arrow"></div><!--arrow-->

       <div class="info_slide">
         <div class="level1">&copy; Datacardz.Inc <?php echo date('Y'); ?></div>
         <div class="level2">
            <a href="" id="about" class="href_link">About</a>
            <a href="" id="terms" class="href_link">Terms</a>
            <a href="" id="corporate" class="href_link">Company</a>
            <a href="" id="blog" class="href_link">Blog</a>
        </div>
      </div>
    </div>

The issue I am facing is that when I use the CSS code: 

.website_logo_to_footerexpand:hover ~ .info_cont
, it displays the div but disappears as soon as I move the mouse to the info_cont div.

Additionally, the code 

.website_logo_to_footer_expand:hover > .info_cont
does not work at all.

Here is my CSS code:

.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}

.website_logo_to_footerexpand:hover ~ .info_cont{
visibility:visible;
opacity:1;
}
htmlcss

Answer №1

Visit this link for the demo

Make sure to view the demonstration.

.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}

.footer_container:hover > .info_cont{
visibility:visible;
opacity:1;
}

Answer №2

It's important to note that the hover effect should be applied to .footer_container rather than .website_logo_to_footer_expand. Since the latter class is positioned to the left, scrolling out of it will naturally cause the information to disappear.

.footer_container:hover > .info_cont

Additionally, remember to add a clearfix because there are floating elements within .footer_container.

Answer №3

For optimal performance, it is recommended to utilize display:block; on floated child divs and display:inline-block; on the parent div in order for the hovering effect to be activated successfully.

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

Set an attribute without replacing any existing class attributes

I have developed a script that updates the class attribute of the body element on my website when an option is selected from a dropdown menu. However, I am facing an issue where it overrides the existing dark mode attribute. The purpose of this script is ...

javascripthtmlcss

Is there a combination of 'auto' and 'none' values in any CSS properties?

Is it safe to assume that if a property is set to auto, it cannot have the value of none, and vice versa? Or if a property has none, can it not have auto as well? I understand that these values have distinct meanings, but I am curious if this concept has ...

cssdefault

Customized placement of form fields on an HTML grid determined by the user

My goal is to organize input elements on a grid based on user preferences. After researching, I stumbled upon CSS grids, which seem promising. I am considering creating a CSS grid with r rows and c columns, then using JavaScript to assign input elements t ...

javascripthtmlcssformsvue.js

What is the process for creating a clickable file upload in Angular?

Currently, I am utilizing the instructions found in this guide to implement a file upload feature in my project. The code provided works perfectly: <input type="file" class="file-input (change)="onFileSelected($event)" #fileUplo ...

javascripthtmlangulartypescript

What is the process of generating a row in AngularJS?

I am struggling to create a row as shown in the image. Currently, my circle is not positioned on the right side and my "P" element is not receiving the background color. Here is the code snippet: http://plnkr.co/edit/qIz2rFgW8n3J92evCRTd?p=preview Is it p ...

cssangularjs

The issue with implementing simple getElementsByClassName JavaScript in the footer of a WordPress site persists

I am facing an issue with a 1-liner JavaScript code in the footer where getElementsByClassName function doesn't seem to work for tweaking style attributes. The text "Hello World" is displaying fine, so I suspect it might be a syntax error? Here' ...

javascripthtmlwordpress

How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

I'm currently working on creating a website for my friend who is a massage therapist. Utilizing a bootstrap dropdown menu, I have added links to different treatments that direct to the treatment.html from the index.html page. Is there a way to creat ...

javascriptjqueryhtmlcss

Instructions on implementing a floating label on a select2 dropdown menu

I am currently utilizing the select2 plugin for my select dropdowns on a webpage. I have multiple select dropdown boxes and I need to implement a floating label specifically for the selected dropdown. Despite my efforts and searches, I have not been able ...

jqueryhtmlcsstwitter-bootstrap

Animation showing on the progress bar is not correctly halted

I am encountering a problem with handling an animation of a progress bar in my code. The issue arises when I pause the animation, as it seems to slightly backtrack instead of pausing at the correct position upon clicking a button. Can someone help identify ...

javascripthtmlcssreactjscss-animations

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

javascriptcssangulartypescriptng-bootstrap

Issue with bouncing dropdown menu

I am in the process of enhancing a Wordpress website by implementing a jQuery menu with sub-menus. Below is the jQuery code snippet: $(document).ready(function(){ $('.menu > li').hover(function(){ var position = $(this).position(); ...

javascriptjqueryhtmlcsswordpress

Utilizing jQuery to close a modal when clicking outside of its container

Trying to target elements in my practice layout but struggling to figure out the right approach: BASIC HTML <button id="opencontact" type="button" name="button"> <i class="far fa-envelope fa-2x"></i> </button> <section id="c ...

jqueryhtmlcss

Using JavaScript to convert the text within a div into negative HTML code

I am working with this specific div: <div class="signs" id="signs" onclick="toggle()">&#43;</div> It currently displays the positive sign. I have set up a JavaScript function that is triggered when the div is ...

javascripthtmlcssfunctiontemplates

What is the best way to adjust a div's height to fill the remaining space of the viewport after the header's height

Is there a way to create a hero section that fills 100vh minus the height of the header, especially when the height of the header is not fixed? I initially used CSS with a height property set to calc(100vh - 310px), where 310px represents the height of t ...

javascriptjqueryhtmlcssresponsive

What is the best way to ensure the options/choices div reaches its ideal width?

Check out my StackBlitz project that I've set up In the styles.css file, you'll notice that I defined a fixed width of 650px for the option dropdown div, which is currently working fine @import '~bootstrap/dist/css/bootstrap.min.css'; ...

javascriptcsstwitter-bootstrapbootstrap-4choices.js

iOS now supports hardware-accelerated CSS3 transitions for seamless and

I can't seem to get hardware acceleration working with my translate3d for top/bottom positioning. What could be causing the issue? .image { background:yellow; -webkit-perspective: 1000; -webkit-backface-visibility: hidden; ...

javascriptioshtmlcsshardware-acceleration

Guide to retrieving a file stored locally with VueJS

Currently, I am working on an upload system and I want to provide users with a sample template. The template is stored locally in a subfolder within the assets directory. My goal is to access this template in my VueJS component and display a link to it on ...

htmlcsvdownloadvue.js

Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective. Here is a snippet of the code: #board { ...

htmlcsshtml-table

What is the best way to utilize variable fonts with Google Fonts?

Traditional fonts typically require a separate file for each weight variant, such as 300, 400, and 500. However, with variable fonts, all weight combinations can be accessed through a single compact font file. This is extremely advantageous for web design. ...

cssfontsgoogle-fontsvariable-fonts

Accessing the form element in the HTML outside of the form tag in Angular 2

I am attempting to achieve the following: <span *ngIf="heroForm?.dirty"> FOO </span> <form *ngIf="active" (ngSubmit)="onSubmit()" #heroForm="ngForm"> <div class="form-group"> <label for="name">Name</label& ...

htmlangulartypescript