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
Post a Comment