使用 (this) 在悬停父元素时选择类的特定实例

Question

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!

Answer 1

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

$(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");

Answer 2

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.