单击时如何删除不透明度（悬停不透明度），使视频不透明答案

【问题标题】：How do I remove opacity (hover opacity) when clicked so video will not be transparent单击时如何删除不透明度（悬停不透明度），使视频不透明
【发布时间】：2017-01-31 07:25:07
【问题描述】：

我希望能够将鼠标悬停在 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

【问题讨论】：

您的意思是点击后悬停过渡被禁用？
更多切换。如果可能的话，比如 .click 的 toggledClass
但是悬停不透明度已经是 1 - 我想我不明白这个问题。为什么视频在悬停时没有变得稳定？（所以点击不需要变成实体）
对不起，让我解释一下。我希望视频在悬停时改变透明度，只要它没有播放。我能看到这个工作的唯一方法是使用 .click。因此，当您单击它时，它会删除悬停功能。再次单击时，悬停功能返回。
好的，我更新了答案。

标签： jquery html css youtube opacity

【解决方案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");
});

【讨论】：