Question

我正在尝试在iframe（youtube / vimeo视频）上添加社交按钮。这个社交按钮位于div容器内。 div容器用javascript显示/隐藏内容。当我将鼠标悬停在按钮上时，此闪烁。任何人都可以帮助我避免眨眼效应吗？我使用javascript，但是一些基于css的解决方案也很好。

这里是一个jsfidle代码 - ＆gt; 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可以处理鼠标事件。（事实上，如果你在“showButtons”div中移动“overlaySharing”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>

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

1 个答案: