-1

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:

  1. when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
  2. when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
  3. 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.

4

2 に答える 2

1

現在、お客様の要件を理解していれば、この問題は解決するはずです

 <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>
于 2013-02-12T13:17:00.423 に答える
0

このフィドル： http: //jsfiddle.net/W4dUa/は、私が正しく理解していれば、あなたが求めていることを行うはずですが、

まず第一に、クラスと ID は$('#Custom_Link')大文字と小文字が区別されます。次のようなビットがあるため、コードを修正してください。id="custom_Link"

mouseenter mouseleaveこれは、次のバインドを解除しているためだと思いますclick:

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

http://api.jquery.com/hover/から

.hover() メソッドは、mouseenter イベントと mouseleave イベントの両方のハンドラーをバインドします。

そのため、

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

もう「機能」せず、highlightクラスはあなたにとどまりますdiv

于 2013-02-12T12:15:10.210 に答える