javascript - 使用 CSS 和 jQuery 切换 HTML 可见性

Question

好的，我有一个包含 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>

悬停事件触发得很好，但图像拒绝切换可见性。有帮助吗？

Answer 1

当你在你的选择器中使用一个类时，这样写:

$('.myDiv')

当您在选择器中使用 ID 时，请这样写:

$('#myDiv')

有关更多信息，请查看 jQuery's learning center网站。