javascript - 当用户将鼠标悬停在两个 div 之一上时，如何让 div 显示特定图像？

Question

我希望类 features_3_content_center 的 div 在用户将鼠标悬停在 ID 为 FH_Blurb 的 div 上时显示 FH_MainMenu.png 图像，或当用户将鼠标悬停在 ID 为 HDS_Blurb 的 div 上时显示 HDS_MainMenu.png 图像。

我在下面尝试了这一点，方法是在 features_3_content_center 中将两个图像放在彼此的顶部，并让它根据图像的 id 显示图像。这似乎不起作用，它只显示第一张图像 (HDS_MainMenu.png) 并且在鼠标悬停时不会改变。我做错了什么？

PicChanger: function() {
  $('#FH_Blurb').mouseover(function() {
    $('.features_3_content_center').getElementById('#features3_FH_image');
  });
  $('#HDS_Blurb').mouseover(function() {
    $('.features_3_content_center').getElementById('#features3_HDS_image');
  });
},

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_left">
    <div class="feature" id="FH_Blurb">
      <h4>Fizz+Hummer</h4>
      <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
      </p>
    </div>
  </div>
  <div class="col-sm-4 col-md-4 ol-lg-4">
    <div class="features_3_content_center">
      <img src="images/HDS_MainMenu.png" class="img-responsive" id="features3_HDS_image" alt="img">
      <img src="images/FH_MainMenu.png" class="img-responsive" id="features3_FH_image" alt="img">
    </div>
  </div>
  <div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_right">
    <div class="feature" id="HDS_Blurb">
      <div>
        <h4 class="we_make_games_HDS_text">Human Delivery Service</h4>
        <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
        </p>
      </div>
    </div>
  </div>
</div>

JSFiddle: http://jsfiddle.net/2hL71dsr/

Answer 1

有点像这样:

$('#features3_FH_image, #features3_HDS_image').hide();           

$('#FH_Blurb').hover(function() {
  $('#features3_FH_image').toggle();
});

$('#HDS_Blurb').hover(function() {
  $('#features3_HDS_image').toggle();
});

查看实际效果 in this demo