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

我希望具有类

features\u 3\u content\u center

的div在用户使用id

FH\u Blurb

在div上鼠标时显示

FH\u main menu.png

图像，或者在用户使用id

HDS\u Blurb

在div上鼠标时显示

HDS\u main menu.png

图像

我在下面尝试了这一点，在

功能\u 3\u内容\u中心将两个图像放在一起，并让它根据其id显示图像。这似乎不起作用，它只显示第一个图像（HDS\u main menu.png），在鼠标悬停时不会改变。我做错了什么


PicChanger:function（）{
$（'FH#u Blurb'）。鼠标悬停（函数（）{
$（'.features_3_content_center'）.getElementById（''features3_FH_image'）；
});
$（'#HDS_Blurb'）。鼠标悬停（函数（）{
$（'.features_3_content_center'）.getElementById（''features3_HDS_image'）；
});
}，

嘶嘶+悍马
Epsum阶乘非存款交换金-埃斯科洛尔。奥林匹克的争吵和大猩猩群居在一起。

人工送货服务
Epsum阶乘非存款交换金-埃斯科洛尔。奥林匹克的争吵和大猩猩群居在一起。

有点像这样：

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

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

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

在实际操作中查看它
您实际上并没有对图像做任何操作。下面是一个简单、直接的方法，在mouseover上显示图像，然后在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();
});

解决方案必须使用Jquery吗？这可以很容易地用CSS单独解决。这不是一个有效的
jQuery
选择器：
$（'.features\u 3\u content\u center'）。getElementById（''features3\u FH\u image'）$（'.features_3_content_center'）.getElementById（''features3_FH_image'）；是不正确的语法这是有效的，但仅适用于
#FH#u Blurb
，当我将鼠标悬停在
#HDS#u Blurb
上时，它不会显示任何内容。我试着让
#HDS_Blurb
显示
#功能3#FH_图像
，结果成功了。这两个图像都存在于文件夹中，那么是什么原因导致了这种情况？