Question

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

我通过在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

中查看

Answer 2

你实际上并没有对图像做任何事情。这是一个简单，直接的方法，在鼠标悬停时显示图像，然后在mouseout上再次隐藏它们。

var imgContainer = $('.features_3_content_center');
var FH_image = imgContainer.find('#features3_FH_image').hide();
var HDS_image = imgContainer.find('#features3_HDS_image').hide();
$('#FH_Blurb').on('mouseover', function() {
  FH_image.show();
});
$('#FH_Blurb').on('mouseout', function() {
  FH_image.hide();
});
$('#HDS_Blurb').on('mouseover', function() {
  HDS_image.show();
});
$('#HDS_Blurb').on('mouseout', function() {
  HDS_image.hide();
});

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

2 个答案: