Question

我有2张图片（#werkwijze＆amp; #werkwijzehover）的样式并定位在我的文档中的相同位置。 Werkwijzehover有display: none，我已经在jQuery中编写了代码，这样当#werkwijze悬停在它上面时它应该显示：隐藏和#werkwijzehover应该显示：Block。

我99.9％确定我的代码是正确的。此外，我有这些元素周围的链接标签，但我无法点击它们。有谁知道这里发生了什么？

＆＃13;

$('#werkwijze').hover(function() {
  $('#werkwijze').css(
    'display', 'none');

  $('#werkwijzehover').css(
    'display', 'block');

});

$('#werkwijzehover').mouseout(function() {
  $('#werkwijzehover').css(
    'display', 'none');

  $('#werkwijze').css(
    'display', 'block');
});

＆＃13;

#wrapperhome10 {
  width: 100%;
  position: relative;
  float: left;
}
#werkwijze {
  width: 30%;
  float: left;
  position: relative;
  margin-left: 35%;
  margin-top: 5%;
  display: block;
}
#werkwijzehover {
  width: 30%;
  float: left;
  position: relative;
  margin-left: 35%;
  margin-top: 5%;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapperhome10">
  <a>
    <img id="werkwijze" src="images/werkwijze.png" />
  </a>
  <a>
    <img id="werkwijzehover" src="images/werkwijzehover.png" />
  </a>
</div>

＆＃13;

Answer 1

您的代码似乎对我很好。在下面运行此代码段并查看它是否按预期工作，或者在下面的评论中告诉我这里有什么问题，我会看到如何进一步提供帮助。

$('#werkwijze').hover(function() {
  $('#werkwijze').css(
    'display', 'none');

  $('#werkwijzehover').css(
    'display', 'block');

});

$('#werkwijzehover').mouseout(function() {
  $('#werkwijzehover').css(
    'display', 'none');

  $('#werkwijze').css(
    'display', 'block');
});

#wrapperhome10 {
  width: 100%;
  position: relative;
  float: left;
}
#werkwijze {
  width: 30%;
  float: left;
  position: relative;
  margin-left: 35%;
  margin-top: 5%;
  display: block;
}
#werkwijzehover {
  width: 30%;
  float: left;
  position: relative;
  margin-left: 35%;
  margin-top: 5%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapperhome10">
  <a>
    <img id="werkwijze" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
  </a>
  <a>
    <img id="werkwijzehover" src="https://s1.yimg.com/rz/d/yahoo_en-US_f_p_bestfit_2x.png" />
  </a>
</div>

元素不可行代码是100％正确的

1 个答案: