javascript - How can I get only the specific H3 I am hovering over to show and not all of them? -



javascript - How can I get only the specific H3 I am hovering over to show and not all of them? -

i trying have text appear on each image user hovers on specific image. don't want of text every image appear when user hovers on 1 image. have 1 photo becomes opaque right text shows every image when hovering on image.

html:

<div class="image"> <img class="projectimage" src="images/peralta.png" alt=""> <h3 class="hiddenh3">this test!</h3> </div>

scss:

.image { position: relative; width: 100%; .projectimage { width: 100%; transition: 0.5s ease-in; } .hiddenh3 { display: none; position: absolute; top: 45%; width: 100%; } }

js:

$('.projectimage').on("mouseover", function() { $(this).closest('.projectimage').addclass("cooleffect"); $('.hiddenh3').fadein(1000); }); $('.projectimage').on("mouseout", function() { $(this).closest('.projectimage').removeclass("cooleffect"); $('.hiddenh3').fadeout(1000); });

use .next along this

$('.projectimage').on("mouseover", function() { $(this).addclass("cooleffect"); $(this).next(".hiddenh3").fadein(1000); }); $('.projectimage').on("mouseout", function() { $(this).removeclass("cooleffect"); $(this).next(".hiddenh3").fadeout(1000); });

you can remove .closest(".projectimage") this refers image.

javascript jquery css3

Comments

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -