Question

挣扎了一段时间，在这里找不到以前的解决方案。我想这是我缺少的非常基本的东西。非常感谢任何帮助。

我试图隐藏图像，然后在链接悬停时显示它。

但是，文档加载时图像不会隐藏。我尝试了其他方法来实现这一点，例如默认隐藏它（不透明度：0;）然后在css中创建“.show”并告诉jQuery addClass show。这也没有用，我相信只是在悬停时隐藏和显示将是更好的解决方案。

编辑：感谢您的回复。不幸的是，这仍然无法工作，可能是由于代码中的其他地方发生了冲突。谢谢你的帮助。

<div id="content">
    <img id=“firstImage” src="image.jpg">
    <p>Here is <a href="#" target="_blank" id="firstLink">The Link</a></p>
</div>

#content img {
  opacity: 1;
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}

$(document).ready(function() {
    $('img').hide();
    $('#firstLink').hover(function() { 
        $('#firstImage').show();
        $('#firstImage').hide);
    });

Answer 1

问题部分是因为您在悬停时调用了bazel build tensorflow/contrib/quantization/tools:quantize_graph ERROR: no such package 'tensorflow/contrib/quantization/tools': BUILD file not found on package path. INFO: Elapsed time: 0.277s然后调用show()元素。还有一个语法错误，因为您在hide()电话中错过了一个括号，并且您在hide() id属性值周围使用了非标准引号。

您可以简化代码，只需在img事件下使用toggle()，就像这样：

＆＃13;

hover

＆＃13;

$(document).ready(function() {
  $('img').hide();
  $('#firstLink').hover(function() {
      $('#firstImage').toggle();
  });
});

＆＃13;

#content img {
  opacity: 1;
  z-index: -1;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}

＆＃13;

Answer 2

在加载页面时，首先使css隐藏的图像比hide()更好！

#content img{
display:none;
}

然后这是正确的jquery代码：

$(function{
$("#firstLink").hover(function(){
$("#firstImage").show();
});
});

您编写hide)而不是hide()的代码存在语法问题。

如果它是正确的，它将在显示后立即隐藏元素，因此你必须删除它。那一切;

Answer 3

您可以通过重新排列布局来使用CSS。如果您的mainView.layout(0, 0, mainView.getMeasuredWidth(), mainView.getMeasuredHeight());位于<a>之前，则可以使用兄弟选择器（<img>或+）来调用目标元素上的~。

在:hover属性上使用mouseenter和mouseleave事件以及.css方法添加了一个庞大的jQuery，因为您在CSS中拥有它并且{{{}的所有常见答案1}}和opacity已经完成，btw show()是另一种方法，结果相同。

段

toggle()

fadeIn()

$('#secondLink').on('mouseenter', function() {
  $("#secondImage").css({
    'opacity': 1,
    'transition': 'all 1s ease-in'
  });
});
$('#secondLink').on('mouseleave', function() {
  3
  $("#secondImage").css({
    'opacity': 0,
    'transition': 'all 1s ease-in'
  });
});

如何隐藏图像并将其悬停在不同的元素上显示

3 个答案:

段