Question

我有许多.job-card-wrap，其中每个都是.arrow类。我想将每个.job-card-wrap悬停并更改src的{{1}}。

这就是我所拥有的，但是将鼠标悬停在一个.arrow上会更改所有.job-card-wrap的{{1}}

src

当悬停在当前.arrows上时，如何定位特定的$(function(){ $(".job-card-wrap").on({ mouseenter: function(){ $(".arrow").attr('src','./images/arrow-blue.png'); }, mouseleave: function(){ $(".arrow").attr('src','./images/arrow-grey.png'); } }); });类？我无法真正分配ID，因为我无法告诉我有多少.arrow来自搜索的信息

Answer 1

您可以使用$(this)（这是悬停的元素），然后使用.find()来定位孩子。

$(function(){
  $(".job-card-wrap").on({
    mouseenter: function(){
      $(this).find(".arrow").attr('src','./images/arrow-blue.png');
    },
    mouseleave: function(){
      $(this).find(".arrow").attr('src','./images/arrow-grey.png');
    }
  });
});

Answer 2

仅使用$(this).find(".arrow")，this表示当前悬停的.job-card-wrap

，或者使用CSS代替JS：

.job-card-wrap .arrow {
    width: 2em;
    height: 2em;
    background-image: url('../images/arrow-blue.png');
}

.job-card-wrap:hover .arrow {
    background-image: url('../images/arrow-grey.png');
}

同样，即使在CSS中，最好也使用一个预加载的字体图标或创建一个精灵（两个图像都在一个.png上），而不是简单地使用CSS background-position

移动背景

.job-card-wrap .arrow {
    width: 24px;
    height: 24px;
    background-image: url('../images/arrow-blue-gray.png'); /* 48x24px image */
}

.job-card-wrap:hover .arrow {
    background-position: -24px 0;
}

使用JQuery在特定类中定位目标类

2 个答案: