Question

我有一系列的li，每个都包含一个图像和一个相关的文本链接。图像和文本都链接到同一页面。当您将鼠标悬停在图像上时，我目前有CSS过渡设置来调整边框半径，并在您滚动时返回。但是，当您将鼠标悬停在文本链接上时，同样的情况不会发生，我希望这种情况发生。

因此，当您将鼠标悬停在文本链接（.customertitle）上时，我为图像（.customerimage）创建了一个悬停类（.customerimagehover）。

试了一下手，但是在文本链接上盘旋时没有任何反应。很确定我的语法是关闭的，而不是jQuery / JS高手。如果有人能引导我朝着正确的方向前进，那就太棒了。

<li>
    <a href="#"><img class="customerimage" src="#"></a><br/>
    <a class="customertitle" href="#">Customer Title</a>
</li>

<script>
    $('.customertitle').hover.closest('img').removeClass('customerimage').addClass('customerimagehover');
</script>

Answer 1

尝试

$('.customertitle').hover(function () {
    $(this).closest('li').find('img').removeClass('customerimage').addClass('customerimagehover');
});

.hover()

.find()

<小时/> Fiddle Demo

$('.customertitle').hover(function () {
    $(this).closest('li').find('img').toggleClass('customerimage  customerimagehover');
});

Answer 2

只需使用css：hover选项！会好起来的！

http://www.w3schools.com/cssref/sel_hover.asp

在包含li的img中添加/删除类

2 个答案: