在jQuery中选择* specific *元素

时间:2016-12-06 22:59:34

标签: javascript jquery html css html5

我是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;
}

2 个答案:

答案 0 :(得分:0)

尝试:

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

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

答案 1 :(得分:0)

由于<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>