CODEWITHSUNDEEP
javascripthtmlcss
Jo_bast
Jo_bast

Reputation: 448

Changing text colour of Html (H2) tag while mouseover in any picture?

I want my text on picture to be changed while mouse is on picture, in the code below my text color changes just when i have mouseover in the text.

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

Upvotes: 2

Views: 1527

Answers (4)

Felix
Felix

Reputation: 38102

If you want to change your image source as well as the h2 text color on hover of the image, you can use this below code:

$('.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

Upvotes: 0

Sid M
Sid M

Reputation: 4354

Just add this line in your 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}

Upvotes: 0

Ruddy
Ruddy

Reputation: 9923

You can do this just using 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;
}

So using the + selector we can select the h2 when we hover over an img.

DEMO HERE

Upvotes: 1

James Hibbard
James Hibbard

Reputation: 17725

You can change the text colour of any h2 tag whilst mousing over any picture like this:

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

If you just want to change a specific h2 tag then use a class:

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

Here's a fiddle

EDIT: You tagged your question jQuery, but you know you can do this with CSS, right?

Upvotes: 2

Related Questions