In between parent and iframe: mouseover/out combined with click behavior

Question

I am very new in programming. Please give me a mercy. According to the post mouseover/out combined with click behavior . I would like to ask further question since I still cannot achieve the task.

Here below is my code:

Child.html

<div id="custom_div">This div will be highlighted</div>

Parent.html

<iframe id="iframeID" src="Child.html"></iframe>    
<a href="#" id="custom_Link">Click to highlight the custom div in Child.html</a>

<script>
    $('#iframeID').contents().find('#custom_div');

    $('#custom_Link').hover(function () {
        $('#custom_div').toggleClass('highlight'); 
    });

    $('#Custom_Link').click(function (e) {
       $('#Custom_div').addClass('highlight');
       $(e.currentTarget).unbind('mouseenter mouseleave');
    });
    </script>

What I want to do is:

when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".

Could you please help me to dissolve this? I sought a lot of "accessing iframe element by Jquery" issue ,however, I still cannot understand. It would be very nice if you could provide Jsfiddle example as well.

score 1 · Accepted Answer · answered Feb 12 '13 at 13:17

If I have understand your requirement currently this should resolve this issue

 <script type="text/javascript">
  $(window).load(function (){
       var triggered_div = $('#iframeID').contents().find('#custom_div');
           $('#custom_Link').hover(function () {
                 triggered_div.toggleClass('highlight'); 
             });
         $('#Custom_Link').click(function (e) {
             triggered_div.addClass('highlight');
            $(e.currentTarget).unbind('mouseenter mouseleave');
         });

    });
 </script>

Luca · Answer 2 · 2013-02-12T12:24:50.670

0

this fiddle: http://jsfiddle.net/W4dUa/ should do what you are asking for, if I understood right, however:

First of all, classes and IDs are case sensitive - revise your code, as you have bits like this: $('#Custom_Link') with uppercase C that is different from id="custom_Link"

I believe that this is because you're unbinding mouseenter mouseleave on click:

   $(e.currentTarget).unbind('mouseenter mouseleave');

from http://api.jquery.com/hover/

The .hover() method binds handlers for both mouseenter and mouseleave events.

for that reason,

$('#custom_Link').hover(function () {
    $('#custom_div').toggleClass('highlight'); 
});

does not "work" anymore and the highlight class stays on your div

edited Feb 12 '13 at 12:24

answered Feb 12 '13 at 12:15

Luca

9,259
5
46
59

I did change the id concerning with case sensitive. Nevertheless, nothing happened. From inspector console, it returned no error, however, no effect taken as well. – Ajarn Canz Feb 12 '13 at 12:28
there is no problem when custom_link and custom_div are in the same html document. Obviously, when I put iframe in, it performs nothing. :( – Ajarn Canz Feb 12 '13 at 12:55

In between parent and iframe: mouseover/out combined with click behavior

2 Answers2