CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Carlos Hervas Ortega
Carlos Hervas Ortega

Reputation: 151

DIV over iframe blinks when I hover the mouse over this

I'm trying put a social button over iframe (youtube/vimeo video). This social buttons are inside a div container. The div container show/hidden the content with javascript. When I hover the mouse over the button, this blink. Can anyone help me to avoid the blink effect? I use javascript, but some css only based solution it's good, too.

Here a jsfidle code --> http://jsfiddle.net/QYpKH Thank you Tyler Rafferty for upload the file

HTML

<div class="overlaySharing">
    <div id="overlayIcons">
        <div class="row">
            <div class="col-lg-12">
                <a href="http://www.facebook.com/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> ">
                    <div  style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
                        <div class="buttonFb"><span class="facebook"></span>Share en Facebook</div>
                    </div>
                </a>
                <a href="http://twitter.com/share?url=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>&text=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> <?php the_title(); ?>">
                     <div   style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
                         <div class="buttonTw"><span class="twitter"></span>Share Twitter</div>
                     </div>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="showButtons" onmouseover="document.getElementById('overlayIcons').style.display = 'block';" onmouseout="document.getElementById('overlayIcons').style.display = 'none';">
    <iframe  src="//player.vimeo.com/video/80871338" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Css

.overlaySharing {
padding: 0;
position: relative;
transition: opacity 0.4s ease 0s, top 0.25s ease 0s; 
width: 100%;
z-index: 500;
}
#overlayIcons {
padding: 0;
top: 50px;
position: absolute;
width: 100%;
z-index: 6000;
}
.showButtons {
width: 100%;
height: 500px;
}
.buttonFb {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#599Bdc), color-stop(100%,#3072B3));
background: -moz-linear-gradient(center top, #599Bdc 0%, #3072B3 100%);
-webkit-box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
-moz-box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
box-shadow: 0px 1px 0px 0px #7dc0ff inset, 0px -1px 0px 0px #1a3d5e inset, 0px 2px 2px 0px #d4d4d4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0px 1px 0px #424242;
padding: 10px 20px;
display: block;
border-color: #295c8c;
border-width: 1px;
border-style: solid;
font-family: Lucida Grande;
font-size: 14px;
color: #FFFFFF;
width: 251px;
}
.buttonFb:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82bbf0), color-stop(100%,#3072B3));
background: -moz-linear-gradient(center top, #82bbf0 0%, #3072B3 100%);
}
.buttonFb:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#143a5e), color-stop(100%,#5ea3e0));
background: -moz-linear-gradient(center top, #143a5e 20%, #5ea3e0 100%);
-webkit-box-shadow: 0px 1px 0px 0px #54799c inset;
-moz-box-shadow: 0px 1px 0px 0px #54799c inset;
box-shadow: 0px 1px 0px 0px #54799c inset;
}
.buttonTw {
display: inline-block;
background: #58bfd8; /* Old browsers */
background: -moz-linear-gradient(top,  #58bfd8 0%, #3096b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#58bfd8), color-stop(100%,#3096b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #58bfd8 0%,#3096b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #58bfd8 0%,#3096b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #58bfd8 0%,#3096b2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #58bfd8 0%,#3096b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58bfd8', endColorstr='#3096b2',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 0px 1px 0px #424242;
padding: 10px 14px;
display: block;
border-color: #008CAF;
border-width: 1px;
border-style: solid;
font-family: Lucida Grande;
font-size: 14px;
color: #FFFFFF;
width: 231px;
}
.buttonTw:hover {
background: #effbff; /* Old browsers */
background: -moz-linear-gradient(top,  #effbff 0%, #3096b2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#effbff), color-stop(100%,#3096b2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #effbff 0%,#3096b2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #effbff 0%,#3096b2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #effbff 0%,#3096b2 100%); /* IE10+ */
background: linear-gradient(to bottom,  #effbff 0%,#3096b2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#effbff', endColorstr='#3096b2',GradientType=0 ); /* IE6-9 */
}
.buttonTw:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#143a5e), color-stop(100%,#5ea3e0));
background: -moz-linear-gradient(center top, #143a5e 20%, #5ea3e0 100%);
-webkit-box-shadow: 0px 1px 0px 0px #54799c inset;
-moz-box-shadow: 0px 1px 0px 0px #54799c inset;
box-shadow: 0px 1px 0px 0px #54799c inset;
}

Upvotes: 1

Views: 2380

Answers (1)

Rob Whiteside
Rob Whiteside

Reputation: 58

The blinking is caused by a small bug in your logic:

When the mouse enters the iframe, you show the buttons. When the mouse hovers over the button, it is leaving the iframe so the mouse-out event fires. This causes the buttons to go away. But now the mouse is over the iframe again so the mouse-over fires and the button comes back. but wait! now the mouse is over the button again so the iframe mouse-out fires..... and so now you have a blinky button :)

You need to add some logic to not hide the buttons if the mouse is over them. You may be able to avoid it if the buttons AND the iframe were all inside the same div. That 'parent' div could handle the mouse events. (And in fact, it works if you move your "overlaySharing" div inside your "showButtons" div -- http://jsfiddle.net/5crKg/)

<div class="showButtons" onmouseover="document.getElementById('overlayIcons').style.display = 'block';" onmouseout="document.getElementById('overlayIcons').style.display = 'none';">
<div class="overlaySharing">
<div id="overlayIcons">
    <div class="row">
        <div class="col-lg-12">
            <a href="http://www.facebook.com/sharer.php?u=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> ">
                <div  style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
                    <div class="buttonFb"><span class="facebook"></span>Share en Facebook</div>
                </div>
            </a>
            <a href="http://twitter.com/share?url=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?>&text=<?php echo $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"] ?> <?php the_title(); ?>">
                 <div   style="float: left; margin-right: 10px; margin-bottom: 10px; width: 250px;">
                     <div class="buttonTw"><span class="twitter"></span>Share Twitter</div>
                 </div>
            </a>
        </div>
    </div>
</div>
</div>
<iframe  src="//player.vimeo.com/video/80871338" width="100%" height="500" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Upvotes: 1

Related Questions