CODEWITHSUNDEEP
javascriptjquerycssthis
JoeG
JoeG

Reputation: 37

Using (this) to select a specific instance of a class while hovering a parent element

I'm attempting to use jQuery to update the css of a specific instance of the child "slide-atc" class when the user hovers over its parent element of the "slide-block" class.

My only restriction is that I cannot edit the HTML directly. Here is some code that I was trying but I dont think im using .this() correctly

  $(".slide-block").hover(function(){
    $(this).(".slide-atc").css("bottom", "0px");
    }, function(){
    $(this).(".slide-atc").css("bottom", "-70px");
  });
<div class="slide-block">
            <div class="slide-atc">

        </div>
    </div>

Any help is greatly appreciated!

Upvotes: 0

Views: 45

Answers (2)

Jo&#227;o F&#252;zessy
Jo&#227;o F&#252;zessy

Reputation: 11

Please try using "this" without the $ sign. The word "this" is a reference to the html element in the DOM itself that is the event source. In the other hand "$(this)" is a jQuery wrapper around that element that enables using other jQuery methods. Also, I think you have an error at line 4 at as the second parameter is not a background-color.

Upvotes: 1

Terry
Terry

Reputation: 66188

Your code has a syntax error: you will need to chain .find() in order to select the nested child, i.e.:

$(this).find(".slide-atc").css("bottom", "0px");

Alternatively, you can provide this as a second argument in a jQuery selector:

$(".slide-atc", this).css("bottom", "0px");

Upvotes: 4

Related Questions