How can I display a box by using the hover method in jQuery?

236
July 04, 2017, at 11:22 PM

How can I display a box by using the hover method in jQuery? I want to open my box by hovering the button like this one example

Answer 1

If you really wanna use jQuery's hover function, there's a simple example below on how to show an element when hovering another. The idea is to add a class to the "box" when hovering the button, and then style that class in CSS. In this case, the box is hidden by default (visibility: hidden;), and when the class visible is added, the box will instead get the style visibility: visible;.

This however can be done with CSS only.

$("#button1").hover(function(){ 
    $('#box1').addClass('visible'); 
},function(){ 
    $('#box1').removeClass('visible'); 
});
#box1{ 
  margin-top: 20px; 
  visibility: hidden; 
  opacity:0; 
  position:relative; 
  top: -10px; 
  background-color: #eee; 
  padding: 5px; 
  transition: visibility 0s, opacity 0.2s, top 0.2s; 
} 
#box1.visible{ 
  visibility: visible; 
  opacity: 1; 
  top:0; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="" id="button1">Hover me</a> 
<div id="box1">I'm a box</div>

READ ALSO
call data-id on ajax success response

call data-id on ajax success response

Originally I have a "like button" that is working very smoothly, and it looked like this:

244
Changing value of XML data using Node JS

Changing value of XML data using Node JS

I have a XML document that looks like this:

252
React native Web View charts are not working in android

React native Web View charts are not working in android

I am struggling with this error from last two days

292
PHP foreach array strange behavior

PHP foreach array strange behavior

I have code with two foreach, first with &, second without:

191