Making a different div visible on mouse enter

Question

I am trying to make a div that you can hover the mouse over, and another one will appear. This is what I have so far...

html

<div id="buttons">
<div id="box"></div>
<div id="content">content here</div>
</div>

css

#box {
position:absolute;
width: 10vw;
height: 10vw;
background-color: blue;
}

#content {
position:absolute;
width: 10vw;
height: 10vw;
background-color: red;
visibility: hidden;
}

jquery

$( "box" )
.mouseover(function() {
$( "content").style.visibility( "visible" );
})

any help you be much appreciated. Thanks!

You need '#' for the selectors to specify IDs (ex. $("#box")). — KiiroSora09, Mar 30 '16 at 22:06
with pure css: http://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a — Meiko Rachimow, Mar 30 '16 at 22:34

LcSalazar · Answer 1 · 2016-03-30T22:08:13.573

You are mixing up JQuery with pure javascript in many places...

Either do this in JQuery:

$("#box").mouseover(function() {
    $("#content").css("visibility", "visible");
});

or do this in pure javascript:

document.getElementById("box").onmouseover = function() {
    document.getElementById("content").style.visibility = "visible";
};

But you can achieve the same effect using css only:

#box {
  position:absolute;
  width: 10vw;
  height: 10vw;
  background-color: blue;
}

#content {
  position:absolute;
  width: 10vw;
  height: 10vw;
  background-color: red;
  visibility: hidden;
}

#box:hover + #content {
  pointer-events: none;
  visibility: visible;
}

<div id="buttons">
  <div id="box"></div>
  <div id="content">content here</div>
</div>

The 'content' selector needs '#' – KiiroSora09 Mar 30 '16 at 22:06 — KiiroSora09, Mar 30 '16 at 22:06
@KiiroSora09 - Oops.. sorry, copy paste. Thank you – LcSalazar Mar 30 '16 at 22:08 — LcSalazar, Mar 30 '16 at 22:08

score 1 · Answer 2 · answered Mar 30 '16 at 22:07

1

You could use:

('#box').hover(
  function () {
    $('#content').show(); //or css('visibility','visible');
  }, 
  function () {
    $('#content').hide(); //or css('visibility','hidden');
  }
);

This will show/hide the div. You miss the '#'

answered Mar 30 '16 at 22:07

JP. Aulet

4,375
4
26
39

score 0 · Answer 3 · answered Mar 30 '16 at 22:09

See the working fiddle here : https://jsfiddle.net/8dpcuztk/

Here, Instead of visibility attribute, play with display : none.

So in essence, you will use show and hide functionality for the second div.

Also, your selector are not working because you are searching for Id and must use # in front of div id.

$("#box").on("mouseover", function() {
    $("#content").show();
})

score 0 · Answer 4 · answered Mar 30 '16 at 22:11

0

Use jQuery append.

$("#box").on('mouseenter', function() {
 $("#content").append("<div class='box'></div>");
});

https://jsfiddle.net/32eckm71/40/

answered Mar 30 '16 at 22:11

Ryan Dantzler

1,124
1
8
18

score 0 · Answer 5 · answered Mar 30 '16 at 22:12

$( "#box" ).hover(
  function() {
    $( "#content" ).fadeIn(); //.show();
  },
  function(){
    $("#content").fadeOut(); //hide();
  }
);

#buttons{position:relative;}
#box {
position:absolute;top:0;left:0;width:10vw;height:10vw;background-color:blue;cursor:pointer;
}

#content {
position:absolute;top:100px;left:100px;width:10vw;height:10vw;background-color:red;
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="buttons">
  <div id="box"></div>
  <div id="content">content here</div>
</div>

Making a different div visible on mouse enter

5 Answers5