关于jquery选择器动态选择的问题

Question

此代码的效果是多个aabb全都触发特效
但是我希望的是只触发单独一个aabb
我本来想的是通过把对象赋值给变量
jquery能选择变量吗？但也不知为何把选择器改为变量会失效
请问大佬有什么方法可以实现动态选择对象的效果吗？
谢谢了！！！

<div class = "aabb">
    <img class = "jjyy" >
    <p class="jjyy">我是一个文本</p>
</div>
<div class = "aabb">
    <img class = "jjyy" >
    <p class="jjyy">我是一个文本</p>
</div>

    <script>
        $(function(){
            $(".aabb").on("mouseover",function(){
                $("img").css({"filter":"blur(3px)" , "background-size" : "120% auto"});
                $("p").css("font-size","40px")
                
            });
            $(".aabb").on("mouseout",function(){
                $("img").css({"filter":"blur(0px)" , "background-size" : "100% auto"});
                $("p").css("font-size","20px")
            });
        });
    </script>

Answer 1

这样可以满足，但不建议

        $(function(){
            $(".aabb").on("mouseover",function(){
                  var par = $(this);
                par.find("img").css({"filter":"blur(3px)" , "background-size" : "120% auto"});
                par.find("p").css("font-size","40px")
                
            });
            $(".aabb").on("mouseout",function(){
                var par = $(this);
                par.find("img").css({"filter":"blur(0px)" , "background-size" : "100% auto"});
                par.find("p").css("font-size","20px")
            });
        });

建议这样

// css
.big img{
  filter: blur(3px),
  background-size: 120% auto;
}
.big p {
  font-size: 40px;
}
// js

        $(function(){
            $(".aabb").on("mouseover",function(){
                  $(this).addClass('big');
                
            });
            $(".aabb").on("mouseout",function(){
                $(this).removeClass('big');
            });
        });

Answer 2

为啥非得写JS, 用CSS不香么？
css hover搞起来啊

https://gist.github.com/5e2913340ee85dc9960d99029f4b68c9

Answer 3

许久不用jQuery了。我记得jQuery里是选择所有的符合选择器的元素的，你想单独触发一个应该指定的更具体比如：$('.aabb:first')或者$(".aabb").eq(0)只操作你想操作的元素。
在当下其实可以考虑使用原生DOM API了。