javascript - 当我将鼠标悬停在 iframe 上时，DIV 会闪烁

Question

我正在尝试在 iframe(youtube/vimeo 视频)上放置一个社交按钮。这个社交按钮位于一个 div 容器内。 div 容器使用 javascript 显示/隐藏内容。当我将鼠标悬停在按钮上时，它会闪烁。谁能帮我避免眨眼效果？我使用 javascript，但一些仅基于 css 的解决方案也很好。

这里是jsfidle代码--> http://jsfiddle.net/QYpKH感谢 Tyler Rafferty 上传文件

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;
}

Answer 1

闪烁是由您的逻辑中的一个小错误引起的:

当鼠标进入 iframe 时，您会显示按钮。当鼠标悬停在按钮上时，它将离开 iframe，因此会触发鼠标移开事件。这会导致按钮消失。但现在鼠标再次位于 iframe 上，因此鼠标悬停触发并且按钮返回。可是等等!现在鼠标再次悬停在按钮上，因此 iframe 鼠标移开会触发......所以现在你有一个闪烁的按钮 :)

您需要添加一些逻辑，以便在鼠标悬停在按钮上时不隐藏按钮。如果按钮和 iframe 都在同一个 div 中，您可以避免它。那个“父”div 可以处理鼠标事件。 (事实上​​，如果您将“overlaySharing”div 移动到“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>