1

I have a couple of elements that I want to change the grayscale of when hovering. Instead of changing all of them at the same time (since they have the same class) I only want to change the one that is currently being hovered.

So I made the following code:

tpj(".cftoverlay").hover(function(){
    tpj(this).find(".hoverBorderWrapper > img").css("filter","grayscale(0%)");
    console.log("test");
},function() {
    tpj(this).find(".hoverBorderWrapper > img").css("filter","grayscale(100%)");
    console.log("test1");
});

The console log works but for some reason the rest of the code doesn't. What am I doing wrong?

My html structure:

<span class="cftoverlay">
    <img src="images/overlay.png">
</span>
<span class="hoverBorderWrapper">
    <img width="750" height="350" src="cms/images/afbeeldingen/artikelen/IMG-20170208-WA0021.jpg" class="img-responsive big-featuredarticles" alt="css3panels-alt-04" title="css3panels-alt-04">
    <span class="theHoverBorder"></span>
</span>

The image stays grayscale no matter what since I added some css so it's grayscale when not hovered, but inline css added by jquery should always overwrite that right?

When hovering it, I can see something changing in my element inspector on this line:

<span class="cftoverlay">

But no css is added anywhere.

Improve this question
5
  • What does tpj(".cftoverlay") do? Commented Jan 8, 2018 at 11:35
  • try adding class to the img tag and select that one. Commented Jan 8, 2018 at 11:36
  • @gurvinder372 tpj is jquery instead of the regular $ sign. On hover of that class it should fire the code beneath it. Commented Jan 8, 2018 at 11:36
  • 1
    .find() only searches through the descendants of .cftoverlay, so it will not find the hoverBorderWrapper span, as that is a sibling and not a child/descendant Commented Jan 8, 2018 at 11:36
  • Note that .hoverBorderWrapper isn't a child of .cftoverlay then find() won't find anything. Also note that simply using a CSS rule :hover is faster and easier, no need JS here. Commented Jan 8, 2018 at 11:37

2 Answers 2

Reset to default
3

I'm assuming that tpj is a reference to jQuery. If so, your issue is because .hoverBorderWrapper is not a child of .cftoverlay but a sibling instead. You need to use next() to retrieve it instead of find():

tpj(".cftoverlay").hover(function(){
    tpj(this).next(".hoverBorderWrapper > img").css("filter", "grayscale(0%)");
    console.log("test");
}, function() {
    tpj(this).next(".hoverBorderWrapper > img").css("filter", "grayscale(100%)");
    console.log("test1");
});

That said, I'd not use JS for this at all. CSS is more better suited to styling changes under the hover event:

.hoverBorderWrapper > img {
  filter: grayscale(100%)
}
.cftoverlay:hover + .hoverBorderWrapper > img {
  filter: grayscale(0%)
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks! Yeah CSS is better for this.
No problem, glad to help
1

Instead of using jQuery, use pure CSS.

eg.

<img src="images/foo.jpg" class="hoverBorderWrapper"/>

<style>
    .hoverBorderWrapper{
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
     }

    .hoverBorderWrapper:hover{
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
     }
</style>
Improve this answer

1 Comment

Note that the hover event is triggered on the .cftoverlay, not the . hoverBorderWrapper, and the result should affect the img itself

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.