Question

我是jQuery的新手，我想通过将鼠标悬停在按钮上来为单个图像添加一个类 - 我认为我知道该怎么做，事实证明我没有。

问题在于我有几个def random_list(): psw = '' for x in range(12): psw = psw + random.choice(list('123456789qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM')) return psw def test_1(driver): driver.find_element_by_xpath("//form//a").click() driver.find_element_by_xpath("//input[@name='tax_id']").send_keys(random_list)个部分，每个部分都有自己的.service。因此，最终结果如预期：当我将鼠标悬停在按钮上时，所有.service button都会受到影响。我以为我可以使用.service-image或$(this)来解决这个问题，但我无法弄明白......

find()

$(".service button").hover(function() {
  $(".service-image").toggleClass("raise");
});

.raise {
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

Answer 1

尝试：

$('service button').on('hover', function(e){
  $(this).siblings('.service-image').toggleClass('raise');
});

您的想法是正确的，因为按钮和特定的图像共享同一个父级。

Answer 2

由于<button>元素是您尝试定位的.service-image的兄弟（即它们共享相同的.service父级），您可以使用siblings() 。通过在.service-image函数中指定siblings()选择器，您可以确保只定位.service-image元素内的.service。

$('.service button').hover(function() {
  $(this).siblings('.service-image').toggleClass('raise');
});

.raise {
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="service home-service1">
  <div class="service-image">
    <img src="images/phone.png" alt="" />
  </div>
  <div class="service-title">
    <h2>Kiosk Renovation</h2>
  </div>
  <div class="service-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat quam sit amet vehicula auctor. Aliquam vel orci hendrerit, vestibulum ligula laoreet, faucibus mi.</p>
  </div>
  <button class="outline-on-dark">Explore</button>
</div>

在jQuery中选择* specific *元素

2 个答案: