Show OUTSIDE div on a:hover

Question

I got this menu I've been working on, I want to make an outside div appear when I mouseover the a.

I've searched through all stackoverlow but all those solutions can't seem to work for me. I must be doing something wrong. I would appreciate some help with this.

my html

        <div id="hover1"></div>
        <div style="float: left; position: relative; left: 50%; margin-top: 237px;">
            <img src="img/octo_logo.png" class="logo" />
        </div>
        <!-- MENU start -->
        <div id="menu">
            <ul>
                <li><a href="bio.html"><span>BIO</span></a></li>
                <li><a href="equipa.html"><span>EQUIPA</span></a></li>
                <li><a href="reconhecimento.html"><span>RECONHECIMENTO</span></a></li>
                <li><a href="parceiros.html"><span>PARCEIROS</span></a></li>
                <li><a href="porque_nao.html"><span>PORQUE NÃO?</span></a></li>
                <li><a href="contactos.html"><span>CONTACTOS</span></a></li>
            </ul>
        </div>

my css:

#hover1{
    width: 155px;
    height: 650px;
    background-color: #57C194;
    float:left;
    position: absolute;
    display: none;
    }
#menu a:hover + #hover1{
    display: block;
    }

Here's a view of the menu http://i.imgur.com/2qqjBpo.png

And the result I want http://i.imgur.com/7DtXsDE.png

EDIT: I'm willing to use jquery.

Check out [this stackoverflow answer](http://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element) and the corresponding [jsfiddle](http://jsfiddle.net/AGgpN/3/) example. — jdegens, Apr 02 '15 at 14:03
@jdegens the div I want to display is not a parent nor a child. — White8Tiger, Apr 02 '15 at 14:06
With the way you've got your HTML structured ... It isn't possible with just CSS. The answer [here](http://stackoverflow.com/questions/14382149/show-div-when-hover-another-div-using-only-css) shows a javascript example for changing elements that aren't beside or contained in the hover element. — Mr. Meeseeks, Apr 02 '15 at 14:06

Mr. Meeseeks · Accepted Answer · 2015-04-02T14:25:20.047

With what you've got above; a simple jQuery example would be something like:

$('#menu a')
.on('mouseover', function (event) {
    $('#hover1').show();
})
.on('mouseout', function (event) {
    $('#hover1').hide();
});

EDIT:

The reason might be because the DOM elements aren't ready.

Try wrapping the above code with:

$(function () {
    // above code here
});

or if that doesn't work:

$(document).ready(function () {
    // above code here
});

Vittorio · Answer 2 · 2019-11-02T09:28:28.773

0

$(function() {
    // DOM ready

    $('#menu a').hover(
      function () {
          $('#hover1').show();
      }, 
      function () {
          $('#hover1').hide();
      });
});

Live preview (how it works) http://jsfiddle.net/e7bp0oz1/1/

edited Nov 02 '19 at 09:28

answered Apr 02 '15 at 14:17

Vittorio

3
4

2

It's nice to give code to answer questions, but it's always better to also explain what it does and how it fix the issue. Thanks – AFract Apr 02 '15 at 14:20

Show OUTSIDE div on a:hover

2 Answers2