when hovering on iframe, how do I trigger a class on element outside of iframe?


Tags: javascript,jquery,css,iframe,hover

Problem :

I have this page with an iframe. I want to trigger a hover class on an element outside of the iframe. It's not a parent wrapper, it's just a totally different div in the DOM outside of the iframe.

The html:

  <body>

    <div class="a6-expander-wrapper"></div>
    <div class="some-other-div"></div>
    <iframe title="My-Iframe" src="//example.com"></iframe>

  </body>

The CSS:

.a6-expander-wrapper-hover {
    opacity: 1 !important;
}

.a6-expander-wrapper {
      height: 44px;
    width: 44px;
   background-color:red;
   opacity: 0;
}

The jquery I'm currently using:

var $iframe = $('iframe[title="My-Iframe"]').contents(); 
var hoverItem = $('.a6-expander-wrapper');

$iframe.find('*').mouseover(function () {
    hoverItem.addClass('a6-expander-wrapper-hover');
}).mouseout(function () {
    hoverItem.removeClass('a6-expander-wrapper-hover');
});

Here's a plnkr: http://plnkr.co/edit/2WONkAijTzF2BBsh3p9H?p=preview

None of this is working as you can tell from the plnkr. I'm not sure what to do. Let me know how you'd solve this.



Solution :

This should be what you need. No need to target the iFrame contents then select everything inside. You can just put the mouseover on the iFrame itself.

$(function () {
    var iframe = $('iframe[title="My-Iframe"]'); 
    var hoverItem = $('.a6-expander-wrapper');
    $(iframe).mouseover(function () {
        hoverItem.addClass('a6-expander-wrapper-hover');
    }).mouseout(function () {
      hoverItem.removeClass('a6-expander-wrapper-hover');
    });
});

Working example: http://plnkr.co/edit/pJdtn9fX8HT9KWSvrOcW?p=preview


    CSS Howto..

    How to show a title in the border of a div [duplicate]

    Contact page Design how to add Bootstrap

    How does this pure CSS tab work?

    How do I sort css selectors with vim?

    How do I use a wildcard asterisk CSS selector in SASS? [closed]

    Does anyone know how Pinterest.com's layout works?

    How do I apply an outline to a custom styled HTML selection element's expansion clickable element only?

    how to elegantly use css sprites in an inline element?

    How to start different elements on different keyframes of an animation in CSS

    Stop CSS & Jquery Slideshow from looping

    how to apply the style using css3 [duplicate]

    How to show overflowing text with animation?(Javascript - HTML - CSS)

    How to fix cloud rising?

    How to reload CSS after ajax call

    How to Vertically Center 2 anchor tags with CSS?

    How to align a horizontal list to the center in css

    How to get odd/even coloring for IE and Firefox using CSS alone?

    Showing only one row of items with css independently of users resolution?

    How to flip an image horizontally halfway through an animation

    How do I stop the text from moving when hovered? (background-image is involved)

    How to reduce div size in CSS using twitter bootstrap?

    How to control the HTML area to the right?

    Conditional css showing limit items

    How do I conclude the right directory path when including in CSS/JS/HTML?

    How to Display a div on mouse-over using jquery ?

    How to add content to an input with css? [duplicate]

    Show popup after page load

    (HTML/CSS) How to align a text to middle of center (in both x and y axis)? [duplicate]

    How to move the POV of an image when using overflow: hidden?

    How to php echo content into
    classes dynamicaly [closed]