How to open 1 div on mouse hover of second div?

Question

Hi I am trying to open one div on mouse hover of second div. The div 1 is display is none by default but when user hover on div 2 the div 1 will be displayed. But it's not working. My code :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

    <style>
        .testtmpblock{
            display: none;
            background-color: black;
            height: 100px;
            width: 100px;
        }
        .tmpd{
            height: 100px;
            width: 100px;
            background-color: blue;
        }
    </style>

    <script>
        $(document).ready(function () {
            $(document).on('mouseenter', '.tmpd', function () {
                $(this).find(".testtmpblock").show();
            }).on('mouseleave', '.tmpd', function () {
                $(this).find(".testtmpblock").hide();
            });
        });
    </script>
</head>
<body>
<div class="tmpd">
    kjkjkj
</div>
<div class="testtmpblock">
    data
</div>
</body>
</html>

div testtmpblock will be appear on hover of div tmpd but it's not working.

I have also write Script for it. Any guidance that where I am wrong ?

Adil · Accepted Answer · 2013-11-13T06:46:32.623

3

You need to use next instead of find as find is used for desendants and your required element is not descendant.

Live Demo

  $(document).ready(function () {
      $(document).on('mouseenter', '.tmpd', function () {
          $(this).next(".testtmpblock").show();
      }).on('mouseleave', '.tmpd', function () {
          $(this).next(".testtmpblock").hide();
      });
  });

You can avoid next if only single element has class testtmpblock

$(document).ready(function () {
      $(document).on('mouseenter', '.tmpd', function () {
          $(".testtmpblock").show();
      }).on('mouseleave', '.tmpd', function () {
          $(".testtmpblock").hide();
      });
});

edited Nov 13 '13 at 06:46

answered Nov 13 '13 at 06:40

Adil

146,340
25
209
204

That's work for me. I have also tried on fiddle. Thank You so much sir. Now I ll have call servlet in that div that display on hover. any idea sir how to do it ? – Java Curious ღ Nov 13 '13 at 06:53
You are welcome, your will need to use ajax your can try using jQuery ajax, this may help, http://www.programming-free.com/2012/08/ajax-with-jsp-and-servlet-using-jquery.html – Adil Nov 13 '13 at 06:56
@elclanrs - that's also pretty good.. Simply awesome and shows code optimisation. Thank You to also. – Java Curious ღ Nov 13 '13 at 07:04
@Adil - Sir do you use TeamViewer ? Your Code works on fiddle but when I am trying it on my pc it's not working. – Java Curious ღ Nov 13 '13 at 07:26
Check if you included jQuery in your page? http://stackoverflow.com/questions/441412/is-there-a-link-to-the-latest-jquery-library-on-google-apis – Adil Nov 13 '13 at 07:29
Yes I have added but I have miss to close the tag in that so after that the function script is not executed. but right now I have solved it. – Java Curious ღ Nov 13 '13 at 08:10
Thank You Sir, Sir is it possible to add servlet in `` right now I have added file vcart.jsp that works fine but data will loaded in it when my showcart servlet file executed then it redirect to vcart.jsp and then data display, so is it possible to add servlet something like that. above include code i have added in `.testtmpblock div.` – Java Curious ღ Nov 13 '13 at 08:19
Its very long I used to work in JSP/Servlet so not sure how we can use it. Servlet will generate html you can use that html here. Could be the id of top most html element generated by servlet. Posting a new question may get you sooner answer. – Adil Nov 13 '13 at 08:25

elclanrs · Answer 2 · 2013-11-13T06:47:34.507

If the divs are next to each other you do this with CSS only:

.testtmpblock {
  display: none;
}

.tmpd:hover ~ .testtmpblock {
  display: block;
}

If you want to animate it you can use CSS3 transitions.

99% of time you can get away with CSS only, and the animations will be faster with transitions. It's all about how you handle the markup. If you make the hidden element a child then it's always doable with just CSS, for example:

<div class="tmpd">
  kjkjkj
  <div class="testtmpblock">
    data
  </div>
</div>

And you'd use a selector like so:

.tmpd:hover .testtmpblock {}

score 1 · Answer 3 · answered Nov 13 '13 at 06:41

1

try next()

 $(document).on('mouseenter', '.tmpd', function () {
                $(this).next(".testtmpblock").show();
            }).on('mouseleave', '.tmpd', function () {
                $(this).next(".testtmpblock").hide();
            });

answered Nov 13 '13 at 06:41

Rituraj ratan

10,260
8
34
55

Ankit Tyagi · Answer 4 · 2013-11-13T06:48:40.077

1

 $(document).ready(function () {
        $('body').on('hover','.tmpd', function () {
            $(".testtmpblock").show();
        }, function () {
            $(".testtmpblock").hide();
        }
    );
 });

edited Nov 13 '13 at 06:48

answered Nov 13 '13 at 06:42

Ankit Tyagi

2,381
10
19

It shows me an error at line last that multiple annotation found. – Java Curious ღ Nov 13 '13 at 06:46

How to open 1 div on mouse hover of second div?

4 Answers4