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