-1

我对编程很陌生。请给我一个怜悯。根据后mouseover/out 结合点击行为。我想问更多问题，因为我仍然无法完成任务。

下面是我的代码：

Child.html

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

父.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>

我想做的是：

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

你能帮我解决这个问题吗？我寻找了很多“通过 Jquery 访问 iframe 元素”的问题，但是，我仍然无法理解。如果您也可以提供 Jsfiddle 示例，那就太好了。

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')大写C不同于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 回答