All geek questions in one place

Hide div when mouse

I have two divs, one for a short summary and one for a long summary.
When I hover over a short resume, the short resume disappears and a long resume appears.
When I "mouseout" from a long resume, it should disappear, and a short summary should appear.

The problem is that when I am still inside the border of a long resume, but because the sort summary was done, the mouseout event occurred

code:

<head> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.js"></script> <script> function show(Fdiv) { $(Fdiv).css("display", "none"); $(Fdiv).next().css("display", "inline"); } function hide(Sdiv) { $(Sdiv).css("display", "none"); $(Sdiv).prev().css("display", "inline"); } </script> </head> <body> <div onmouseover="show(this)"> Sort summary <br /> Second Row</div> <div onmouseout="hide(this)" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div> </body> </html>
+4
source share
5 answers

try it

 <div onmouseover="show_div(this)"> Sort summary <br /> Second Row</div> <div onmouseout="hide_div(this)" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div> <script> function show_div(Fdiv) { $(Fdiv).hide(); $(Fdiv).next().show(); } function hide_div(Sdiv) { $(Sdiv).hide(); $(Sdiv).prev().show(); } </script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
0
source

Instead of hacking it with JavaScript, you can accomplish this with CSS. This provides performance as well as semantic and logical benefits.

You need to modify the HTML structure a bit. I will take that resume for books.

HTML

 <div class="book"> <p class="short">Short summary.</p> <p class="long">Long summary.</p> </div>

CSS

 .book .long, .book:hover .short { display:none } .book:hover .long { display:block }

Hope this helps.

+1
source

It's just using the jquery mouseleave built-in function

0
source

Try this Working Demo : http://jsfiddle.net/UG3FZ/

The following APIs are used in this demo:

.mouseout - http://api.jquery.com/mouseover/

.mouseover - http://api.jquery.com/mouseout/

Since you are using the latest JQ, I can suggest reading through jquery api and a few tips on the web.

Rest, demonstration should serve your needs :)

code

 $(function() { $(".show_div").mouseover(function() { $(this).next().show(); $(this).hide("slow"); }); $(".hide_div").mouseout(function() { $(this).prev().show(); $(this).hide("slow"); }); });​
0
source

Do this: -

HTML:

 <div class="main"> <div class="short"> Short summary <br /> Second Row</div> <div class="long" style="display:none"> Long Summary <br /> Second Row<br /> Third Row <br /> Fourth Row</div> </div>

JQuery

 $(".main") .mouseenter( function() { $(this+".long").show(); $(this+".short").hide(); }) .mouseleave( function() { $(this+".short").show(); $(this+".long").hide(); });

Contact LIVE DEMO

0
source

Source: https://habr.com/ru/post/1441229/

More articles:


All Articles