```
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#myDiv').click(function() {
            var checkBox = $(this).children("input[type='checkbox']");
            checkBox.attr('checked', !checkBox.attr('checked'))
        });
    });
</script>

<div id="myDiv" style="background-color:red;height:50px;width:50px;">
    <input type="checkbox" />
</div>

```

I'm having problems making the div clickable so that it checks the nested checkbox. I would like to make it so this function works only if the mouse is not hovering the checkbox. How can I do this? Something like this:

```
if (!checkBox.isHover)
    checkBox.attr('checked', !checkBox.attr('checked'))

```

Note this question has been asked here before, but the answers did not seem to solve the problem. The wrapped label solution does not work properly in FireFox. Thank you.