Question

我希望在鼠标在图片上时更改图片上的文字，在我的文字颜色下面的代码中，当我将鼠标悬停在文本中时，颜色会发生变化。

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>

JavaScript：

<script>
loadImage1 = new Image();
loadImage1.src="./goal/images/clickedButton.png";
staticImage1 = new Image();
staticImage1.src="./goal/images/normalButton.png";
</script>

CSS：

.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; }

Answer 1

您可以更改任何h2标签的文字颜色，同时将鼠标悬停在任何图片上：

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

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

e.g。 $("h2.myClass").addClass("red");

这是fiddle

编辑：你标记了你的问题jQuery，但是你知道你可以用CSS做到这一点，对吗？

Answer 2

您可以使用CSS执行此操作：

HTML：

<img name="image1" src="./goal/images/normalButton.png" style="vertical-align: middle; width : 183px;" />

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

CSS：

.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;
}

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

DEMO HERE

Answer 3

只需在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}

Answer 4

如果您想在图像悬停时更改图像来源和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');
});

<强> Fiddle Demo

在任何图片中鼠标悬停时更改Html（H2）标签的文字颜色？

4 个答案:

HTML：

CSS：