我希望类 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/
最佳答案
有点像这样:
$('#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
关于javascript - 当用户将鼠标悬停在两个 div 之一上时,如何让 div 显示特定图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30176263/