Question

编辑：无奈感谢@Arsh帮助我弄明白。现在它就像一个魅力。我添加了一些CSS过渡以获得更好的外观，希望这个线程将来会帮助某人：）

你可以在这里找到工作小提琴：http://jsfiddle.net/4bkzdrve/

原始问题和解决方案：

我有iframe youtube视频，并已将默认不透明度设置为0.3和onhover 1.0。我希望iframe检测onlick事件，然后将不透明度设置为1.0，即使鼠标不在iframe区域。我尝试了一切但没有成功。这是一些标记：

CSS：

iframe.video{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
transition:all 1s linear; 
-o-transition:all 1s linear; 
-moz-transition:all 1s linear; 
-webkit-transition:all 1s linear;} 

iframe.video:hover{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;}

HTML：

<iframe class="video" width="500" height="300" src="https://www.youtube.com/embed/YjWIAOsndu4" frameborder="0" allowfullscreen></iframe>

如果可能的话，我想为移动设备提供解决方案，但不是必需的。谢谢你前来帮助我

Answer 1

此问题的工作解决方案：http://jsfiddle.net/drs7sg3c/2/

首先要记住在jquery source html document内<head> </head>包含<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>个文件：

</body>

您可以使用<script type="text/javascript"> $(document).ready(function(){ $(document).on('click',function(){ $('iframe').css('opacity','1'); }); }); </script>结束标记上方的以下jQuery函数来实现：

iframe

即使您点击<script type="text/javascript"> $(document).ready(function(){ $('iframe').on('click',function(){ $(this).css('opacity','1'); }); }); </script>：

，也可以使不透明度为1

.click()

我建议您打开以下网址，阅读有关<script type="text/javascript"> $(document).ready(function(){ $('iframe').one('click',function(){ $(this).css('opacity','1'); }); }); </script>事件的内容：

https://api.jquery.com/click/

根据guest

的建议

同时检查一下：

    <!doctype html>
<html>
    <head>
        <title>My iframe</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <style>
            .video{
            transition:all 1s linear; 
            -o-transition:all 1s linear; 
            -moz-transition:all 1s linear; 
            -webkit-transition:all 1s linear;
float:left;
position:relative;

} 
.video.opacity:hover:before{
  background:rgba('255,255,255,0');
 }
     .video.opacity:before{
     content:"";
        background:rgba(255,255,255,0.8);
        width:100%;
        height:100%;
        left:0;
        top:0;
        position:absolute;
        z-index:1;
    }
            </style>    
</head>
<body>
 <div class="video opacity">
<iframe width="500" height="300" src="https://www.youtube.com/embed/YjWIAOsndu4?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>
<script type="text/javascript">
jQuery('.video').click(function(){
   $(this).removeClass('opacity');
    $(this).find('iframe')[0].src += "&autoplay=1";
    ev.preventDefault();

  });
</script>
</body>
</html>

作为完整的html结构试试这个：

.video

现在点击opacity ``(:before)上方的代码会移除{{1}}并自动播放视频。

Answer 2

尝试使用.toggleClass()附加click事件的$(window)在第一次点击时将不透明度切换为1，将css重置为首字母，包括{{ 1}}影响，第二次点击;在:hover

上的每个click切换前者和后者

window

jsfiddle http://jsfiddle.net/2x4xz/9/

iframe onclick事件改变不透明度

2 个答案: