使用 CSS 和 jQuery 切换 HTML 可见性

Question

好的，所以我有一个包含 canvas 的 div 和一个包含图像的跨度。我希望这样，如果用户将鼠标悬停在 div 上或将焦点放在 div 上，则会出现跨度内的图像。否则图像将不可见。

长话短说我想要一个 canvas 的角落有一个红色 'X'，只有当 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

看这里。

$("#control").mouseover(function(){
  $('#img').show();
});
$("#control").mouseout(function(){
  $('#img').hide();
});

#img{
  display:none;
}
#control{
  margin-bottom:10px;
  padding:5px;
  background-color:#eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='control'>Show/Hide</div>

<img src='https://cdn.sstatic.net/Sites/Whosebug/img/404.svg' id='img'>

Answer 2

您似乎拼写错误或未指定 jQuery 选择器类型（class . 或 id #）。请试试这个：

$('#imageCanvas').hover(function () {
  $('.delete-image').addClass('active');
}, function () {
  $('.delete-image').removeClass('active');
})

Answer 3

当您在选择器中使用 class 时，请这样写：

$('.myDiv')

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

$('#myDiv')

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

Answer 4

这个问题措辞不当，所以我不确定我是否完全理解你想要什么。当您尝试 select by class 时，不要忘记点 '.'

$('image-canvas').hover(function () {
                $('.delete-image').addClass('active');
            }, function () {
                $('.delete-image').removeClass('active');
            })

当使用函数 'addClass'、'removeClass'、'toggleClass' 等时 - 您不使用“.”符号，因为它是一个仅引用 classes 的函数。另一方面，当使用 jQuery selector $(' ') 或 vanilla querySelector(' ') 时，你应该声明你 selecting 的属性类型，那些将ID 为“#”，“.”对于 Class，如果你想 select 通过任何其他你可以使用 $('*[anyattribute=anyvalue]')，在你的情况下它可以是 $('span[class=delete-image]')。祝你好运

使用 CSS 和 jQuery 切换 HTML 可见性

Toggling HTML visibility using CSS and jQuery

html

javascript

css

jquery

visibility