Question

我是编程方面的新手。请给我一个怜悯。根据帖子mouseover/out combined with click behavior 。我想问更进一步的问题，因为我仍然无法完成任务。

以下是我的代码：

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>

我想做的是：

当用户在“custom_link”上悬停鼠标时，“custom_div”正在突出显示。
当用户将鼠标移开“custom_link”时，“custom_div”中的突出显示将被消除。
当用户点击“custom_link”时，“custom_div”正在突出显示。但是，当用户将鼠标移出时，'highlightDiv'仍会被添加到“custom_div”。

Answer 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>

Answer 2

这个小提琴：http://jsfiddle.net/W4dUa/应该做你要求的，但是如果我理解的话，那么：

首先，类和ID区分大小写 - 修改代码，因为你有这样的位：$('#Custom_Link')大写 C 不同于id="custom_Link" < / p>

我认为这是因为您在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

在parent和iframe之间：mouseover / out与click行为相结合

2 个答案: