toggleClass() 对我不起作用
toggleClass() does not work for me
我正在尝试设置视频库,当我将鼠标悬停在视频缩略图上时,我希望我的播放按钮从不透明度:.3 更改为不透明度:1。
我试图通过使用带有 toggleClass() 的 jQuery 脚本来实现这一点。我试过使用不透明的 animate(),效果很好。但我想改用 toggleClass() 方法。但是当我悬停时什么也没有发生。
//Fade in Play Button
$('.gallery-poster-play-button').hover(function() {
$('.gallery-poster-play-button img').toggleClass('toggle-opacity-play-button');
});
.video-list {
display: flex;
justify-content: flex-start;
list-style: none;
}
.video-list li {
margin-right: 10px;
transition: all .3s;
}
.video-list li:hover {
transform: scale(0.98);
cursor: pointer;
}
.video-list li img {
border-radius: 4px;
}
.video-list li a {
display: block;
padding: 5px;
text-decoration: none;
}
.play-button {
position: relative;
}
.gallery-poster-play-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gallery-poster-play-button img {
position: absolute;
left: 40%;
top: 35%;
vertical-align: middle;
opacity: .3;
}
.toggle-opacity-play-button {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
<li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
<img src="../assets/videos/posters/video-poster-11.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
<li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
<img src="../assets/videos/posters/video-poster-22.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
</ul>
问题是因为 .toggle-opacity-play-button
规则不够具体,无法覆盖 .gallery-poster-play-button img
中的 opacity
设置。您需要提高特异性。您还需要使用 $(this).find('img')
来仅影响当前元素的子元素,如下所示:
.gallery-poster-play-button img.toggle-opacity-play-button {
opacity: 1;
}
//Fade in Play Button
$('.gallery-poster-play-button').hover(function() {
$(this).find('img').toggleClass('toggle-opacity-play-button');
});
.video-list {
display: flex;
justify-content: flex-start;
list-style: none;
}
.video-list li {
margin-right: 10px;
transition: all .3s;
}
.video-list li:hover {
transform: scale(0.98);
cursor: pointer;
}
.video-list li img {
border-radius: 4px;
}
.video-list li a {
display: block;
padding: 5px;
text-decoration: none;
}
.play-button {
position: relative;
}
.gallery-poster-play-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gallery-poster-play-button img {
position: absolute;
left: 40%;
top: 35%;
vertical-align: middle;
opacity: .3;
}
.gallery-poster-play-button img.toggle-opacity-play-button {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
<li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
<img src="../assets/videos/posters/video-poster-11.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
<li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
<img src="../assets/videos/posters/video-poster-22.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
</ul>
也就是说,您根本不需要使用 JS,因为 CSS :hover
伪选择器在这里可以正常工作:
.video-list {
display: flex;
justify-content: flex-start;
list-style: none;
}
.video-list li {
margin-right: 10px;
transition: all .3s;
}
.video-list li:hover {
transform: scale(0.98);
cursor: pointer;
}
.video-list li img {
border-radius: 4px;
}
.video-list li a {
display: block;
padding: 5px;
text-decoration: none;
}
.play-button {
position: relative;
}
.gallery-poster-play-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gallery-poster-play-button img {
position: absolute;
left: 40%;
top: 35%;
vertical-align: middle;
opacity: .3;
}
.gallery-poster-play-button:hover img {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
<li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
<img src="../assets/videos/posters/video-poster-11.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
<li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
<img src="../assets/videos/posters/video-poster-22.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
</ul>
我正在尝试设置视频库,当我将鼠标悬停在视频缩略图上时,我希望我的播放按钮从不透明度:.3 更改为不透明度:1。 我试图通过使用带有 toggleClass() 的 jQuery 脚本来实现这一点。我试过使用不透明的 animate(),效果很好。但我想改用 toggleClass() 方法。但是当我悬停时什么也没有发生。
//Fade in Play Button
$('.gallery-poster-play-button').hover(function() {
$('.gallery-poster-play-button img').toggleClass('toggle-opacity-play-button');
});
.video-list {
display: flex;
justify-content: flex-start;
list-style: none;
}
.video-list li {
margin-right: 10px;
transition: all .3s;
}
.video-list li:hover {
transform: scale(0.98);
cursor: pointer;
}
.video-list li img {
border-radius: 4px;
}
.video-list li a {
display: block;
padding: 5px;
text-decoration: none;
}
.play-button {
position: relative;
}
.gallery-poster-play-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gallery-poster-play-button img {
position: absolute;
left: 40%;
top: 35%;
vertical-align: middle;
opacity: .3;
}
.toggle-opacity-play-button {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
<li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
<img src="../assets/videos/posters/video-poster-11.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
<li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
<img src="../assets/videos/posters/video-poster-22.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
</ul>
问题是因为 .toggle-opacity-play-button
规则不够具体,无法覆盖 .gallery-poster-play-button img
中的 opacity
设置。您需要提高特异性。您还需要使用 $(this).find('img')
来仅影响当前元素的子元素,如下所示:
.gallery-poster-play-button img.toggle-opacity-play-button {
opacity: 1;
}
//Fade in Play Button
$('.gallery-poster-play-button').hover(function() {
$(this).find('img').toggleClass('toggle-opacity-play-button');
});
.video-list {
display: flex;
justify-content: flex-start;
list-style: none;
}
.video-list li {
margin-right: 10px;
transition: all .3s;
}
.video-list li:hover {
transform: scale(0.98);
cursor: pointer;
}
.video-list li img {
border-radius: 4px;
}
.video-list li a {
display: block;
padding: 5px;
text-decoration: none;
}
.play-button {
position: relative;
}
.gallery-poster-play-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gallery-poster-play-button img {
position: absolute;
left: 40%;
top: 35%;
vertical-align: middle;
opacity: .3;
}
.gallery-poster-play-button img.toggle-opacity-play-button {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
<li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
<img src="../assets/videos/posters/video-poster-11.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
<li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
<img src="../assets/videos/posters/video-poster-22.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
</ul>
也就是说,您根本不需要使用 JS,因为 CSS :hover
伪选择器在这里可以正常工作:
.video-list {
display: flex;
justify-content: flex-start;
list-style: none;
}
.video-list li {
margin-right: 10px;
transition: all .3s;
}
.video-list li:hover {
transform: scale(0.98);
cursor: pointer;
}
.video-list li img {
border-radius: 4px;
}
.video-list li a {
display: block;
padding: 5px;
text-decoration: none;
}
.play-button {
position: relative;
}
.gallery-poster-play-button {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.gallery-poster-play-button img {
position: absolute;
left: 40%;
top: 35%;
vertical-align: middle;
opacity: .3;
}
.gallery-poster-play-button:hover img {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="video-gallery" class="video-list">
<li class="play-button" data-poster="../assets/videos/posters/video-poster-1.png" data-sub-html="video caption1" data-html="#video1">
<img src="../assets/videos/posters/video-poster-11.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
<li class="play-button" data-poster="../assets/videos/posters/video-poster-2.png" data-sub-html="video caption2" data-html="#video2">
<img src="../assets/videos/posters/video-poster-22.png" />
<div class="gallery-poster-play-button">
<img src="../assets/data/node_modules/lightgallery/dist/img/video-play.png" alt="">
</div>
</li>
</ul>