jquery - 单击时如何删除不透明度(悬停不透明度)以使视频不透明

Question

我希望能够将鼠标悬停在 YouTube 视频上并影响透明度/不透明度(就像现在一样)但是，当我点击播放视频时，它会变成实心并且不再使用悬停不透明度。

我不确定如何在 iframe 上使用 jQuery 和 click 功能。好像不行。

* {
  margin: 0px 0 0 0;
}
body {
  background: url("https://photos-4.dropbox.com/t/2/AAAzaQaQL59efVSi-nMxk-jzk3dedLDcqaHBtj9zHmBZ2g/12/20139880/jpeg/32x32/1/_/1/2/back.jpg/EJ6Giw8Y9DUgBygH/bwJw1OSYLtn5ScrUolS8x1brd_phrJ_y11sS9ctVrzQ?size_mode=5") fixed;
  background-size: cover;
}
#content {
  width: 853px;
  height: 480PX;
  background: #000000;
  opacity: 0.8;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
}
iframe {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -moz-transition: all 0.4s ease-out;
  /* FF4+ */
  -o-transition: all 0.4s ease-out;
  /* Opera 10.5+ */
  -webkit-transition: all 0.4s ease-out;
  /* Saf3.2+, Chrome */
  -ms-transition: all 0.4s ease-out;
  /* IE10? */
  transition: all 0.4s ease-out;
}
iframe:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-transition: all 0.4s ease-out;
  /* FF4+ */
  -o-transition: all 0.4s ease-out;
  /* Opera 10.5+ */
  -webkit-transition: all 0.4s ease-out;
  /* Saf3.2+, Chrome */
  -ms-transition: all 0.4s ease-out;
  /* IE10? */
  transition: all 0.4s ease-out;
}
#logo {
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.6;
  width: 600px;
  height: auto;
}
#logo img {
  width: 600px;
  height: auto;
}

<div id="logo">
  <img src="http://s277461962.websitehome.co.uk/codepen/logo.png" />
</div>
<div id="content">
  <iframe width="853" height="480" src="https://www.youtube.com/embed/grsCRQaY2CI?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

代码笔:http://codepen.io/Middi/pen/PGbNgg

Answer 1

在这里添加和删除类可能是一个不错的选择...

试试这个:

iframe.hoverclass {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-transition: all 0.4s ease-out;
    // etc.
}


$("iframe").mouseenter(function () {
    $(this).addClass("hoverclass");
}).click(function () {
    $(this).removeClass("hoverclass");
}).mouseleave(function () {
    $(this).addClass("hoverclass");
});