Javascript 鼠标悬停在任何图片上时更改Html（H2）标记的文本颜色？

当鼠标在图片上时，我想更改图片上的文本，在下面的代码中，当文本中有鼠标时，我的文本颜色会更改

Html:

   <div class="mnrImage" style="text-align: center; width: 183px">
   <a href="a.com" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
   <img name="image1" src="./goal/images/normalButton.png"  style="vertical-align: middle; width : 183px;"/> 
   <h2 class ="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2></a>
   </div>

---

您可以更改任何h2标记的文本颜色，同时将鼠标悬停在任何图片上，如下所示：

$("img").on("mouseover", function(){
   $("h2").addClass("red"); 
})
.on("mouseout", function(){
   $("h2").removeClass("red"); 
});

如果您只想更改特定的h2标记，请使用类：

e、 g.

$（“h2.myClass”）.addClass（“红色”）

这里有一个

编辑：您已将问题标记为jQuery，但您知道可以使用CSS完成此操作，对吗？
您可以使用CSS完成此操作：

HTML:
因此，当我们将鼠标悬停在
img
上时，使用
+
选择器可以选择
h2

只需在CSS
div>a:hover>h2>span{color:green}

    .mnrImage{ position: relative;  width: 100%;}
    .mnrImage:hover{ position: relative;  width: 100%; text-color:black}
    .mnrImageH2{ position: absolute;  top:1px;  left: 0;  width: 100%; }
    .mnrImageSpan{ color: white;  font: bold 24px/45px Helvetica, Sans-Serif;  letter-spacing: -1px;  padding: 10px; }
    .mnrImageSpan:hover{ color: black;  font: bold 24px/45px Helvetica, Sans-Serif;  letter-spacing: -1px;  padding: 10px; }
/*add this line*/
    div> a:hover > h2 > span {color:green}

如果要更改图像源以及图像悬停时的h2文本颜色，可以使用以下代码：

$('.mnrImage img').hover(function() {
    var h2Text = $(this).next().children(),
        name = $(this).attr('name');
    $(this).attr('src', "newImgSrc.jpg");
    h2Text.css('color','red');
    $(this).data('h2Text',h2Text);  
}, function() {
    $(this).attr('src', "./goal/images/normalButton.png")
    $(this).data('h2Text').css('color','blue');
});

为此，您需要一个简单的脚本。你把jquery标签放在你的帖子上，你是想用它还是纯javascript？非常感谢@Ruddy，你的解决方案解决了我的问题：）我认为它不能用css解决，我也把标签放在jquery上，现在我删除了那个标签，谢谢你的帮助@Jack Zelig:）
<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />

<h2 class="mnrImageH2"><span class = "mnrImageSpan">Haberler</span></h2>

.mnrImageH2 {
    position: absolute;
    top:1px;
    left: 0;
    width: 100%;
}
.mnrImageSpan {
    font: bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing: -1px;
    padding: 10px;
}
h2 {
    color: white;
}
img:hover + h2 {
    color: #000;
}

    .mnrImage{ position: relative;  width: 100%;}
    .mnrImage:hover{ position: relative;  width: 100%; text-color:black}
    .mnrImageH2{ position: absolute;  top:1px;  left: 0;  width: 100%; }
    .mnrImageSpan{ color: white;  font: bold 24px/45px Helvetica, Sans-Serif;  letter-spacing: -1px;  padding: 10px; }
    .mnrImageSpan:hover{ color: black;  font: bold 24px/45px Helvetica, Sans-Serif;  letter-spacing: -1px;  padding: 10px; }
/*add this line*/
    div> a:hover > h2 > span {color:green}

$('.mnrImage img').hover(function() {
    var h2Text = $(this).next().children(),
        name = $(this).attr('name');
    $(this).attr('src', "newImgSrc.jpg");
    h2Text.css('color','red');
    $(this).data('h2Text',h2Text);  
}, function() {
    $(this).attr('src', "./goal/images/normalButton.png")
    $(this).data('h2Text').css('color','blue');
});