1) 我创建了一个不透明度为 1 的图像。当您将鼠标悬停在它上面时,不透明度变为 0.3,并且图像上方会出现一个按钮。问题是,当您将鼠标悬停在按钮上时,图像的不透明度返回到 1。当鼠标悬停在图像或按钮上时,如何使图像的不透明度保持 .3?
2) 当您点击播放时,原始图像会变为新图像。但是由于鼠标在图像上,新图像的不透明度为 0.3。如何将新图像设置为不透明度为 1,即使它悬停时也是如此?
var originalImgSrc = $('img').attr('src');
// Change image on button click
$(".the-buttons").click(function() {
$('img').attr("src", "https://s3.amazonaws.com/blitzbase-assets/assets/2.gif");
$(this).addClass("hide");
});
//Restore image on mouse out
$('.show-image img').mouseout(function() {
$('img').attr("src", originalImgSrc);
$('.the-buttons').removeClass("hide");
});
div.show-image {
position: relative;
float: left;
margin: 0px;
padding: 0px;
background: #333;
}
div.show-image img {
opacity: 1;
background: white;
}
div.show-image img:hover {
opacity: .3;
-webkit-transition: opacity .2s ease-in-out;
}
div.show-image:hover input {
display: block;
}
div.show-image input {
position: absolute;
display: none;
top: 100px;
left: 100px;
}
div.show-image input.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-image">
<img src="https://via.placeholder.com/100.png/09f/fff" />
<input class="the-buttons" type="button" value="Play" />
</div>
最佳答案
这是您两个问题的答案。
将鼠标悬停在父节点上:
.show-image:hover img
在父级上添加“隐藏”类并以此方式更改不透明度。
$(this).parent().addClass("隐藏");
div.show-image.hide img{ 不透明度:1;
要在第一次单击后将播放按钮重新添加到悬停状态,您必须在鼠标移出函数中从父项中删除隐藏类:
$('.the-buttons').parent().removeClass("隐藏");
关于javascript - 如何去除悬停状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23917352/