0

I have a DIV element which is hidden by default. But on hover, I want it to be visible.

This is my current CSS:

.main-menu .left-footer{
    display: none;
}

.main-menu:hover + .left-footer {
   display: block !important;
}

And HTML:

<div class="left-footer">
                <small>
                <a href="/support">Support</a> <a href="/terms">Terms of Service</a> <a href="/privacy">Privacy</a> <br />
                &copy; 2015 LittleBux. All Rights Reserved
                </small>
              </div>

What am I doing wrong here?

I am taking example from this topic

Community
  • 1
  • 1
oliverbj
  • 5,771
  • 27
  • 83
  • 178
  • 1
    where is the element with the `.main-menu` class? post all the relevant code please, not only fragments of it. – Banana Mar 24 '15 at 19:37
  • Well not knowing what is in `.main-menu` it cannot be empty if `.left-footer` is not shown. If it is you won't be able to 'hover' over it. To get around this you must set a width and height for it and ditch the `+` in your `.main-menu:hover` css. – Wild Beard Mar 24 '15 at 20:30

2 Answers2

2

They're using conflicting selectors. In the first, .left-footer is a child of .main-menu. In the second example, it's a sibling.

As you haven't posted the bit of code with .main-menu I'm not sure about it's relationship to .left-footer, but you need to make the two rules consistent.

Dan Blows
  • 20,846
  • 10
  • 65
  • 96
0

Seems to me like you're getting display and visibility mixed up. display: none; makes the element disappear from the document, meaning you can't interact with it. What you want to use instead is visibility: hidden;, which makes the element hidden but still keep its place on the page. Try changing the first block of code to the following:

.main-menu .left-footer{
    visibility: hidden;
}

.main-menu:hover + .left-footer {
   visibility: visible;
}
eritbh
  • 726
  • 1
  • 9
  • 18