I am brand new to programming and seeking some guidance. I came across a post about mouseover/out combined with click behavior that I found intriguing. However, I am struggling to implement it successfully in my code.
Here is the code snippet:
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>
My goal is to achieve the following:
- When the user hovers over "custom_link", the "custom_div" should be highlighted.
- Once the user moves the mouse away from "custom_link", the highlight on "custom_div" should disappear.
- If the user clicks on "custom_link", "custom_div" should be highlighted. But even after moving the mouse away, the 'highlightDiv' remains added to "custom_div".
I have been struggling with accessing iframe elements using Jquery and would appreciate any help or insights you can provide. It would be really helpful if you could also provide a Jsfiddle example for better understanding.