好的,我有一个包含 Canvas 的 div 和一个包含图像的跨度。我想要这样,如果用户将鼠标悬停在或关注 div,则跨度内的图像将出现。否则图像将不可见。
长话短说,我想要一个 Angular 落有红色“X”的 Canvas ,只有在 Canvas 处于事件状态时才可见
$('image-canvas').hover(function() {
$('delete-image').addClass('active');
}, function() {
$('delete-image').removeClass('active');
})
.delete-image {
position: absolute;
top: 0px;
right: 0px;
}
.delete-image>img {
width: 32px;
visibility: hidden;
}
.delete-image.active>img {
width: 32px;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="canvas-container" tabindex="1">
<canvas id="imageCanvas"></canvas>
<span class="delete-image">
<img src="file:///E:/Apps/Emoji-App/emojis/icons/if_erase_delete_remove_wipe_out_181387.png"/>
</span>
</div>
悬停事件触发得很好,但图像拒绝切换可见性。有帮助吗?
最佳答案
当你在你的选择器中使用一个类时,这样写:
$('.myDiv')
当您在选择器中使用 ID 时,请这样写:
$('#myDiv')
有关更多信息,请查看 jQuery's learning center网站。
关于javascript - 使用 CSS 和 jQuery 切换 HTML 可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51259968/