Question

我有一个嵌套在容器中的锚标记，并且div嵌套在锚标记内：

<div id="container">
<a href="" id="my-anchor"><div id="my-image"></div>Text of the link</a>
</div>

将鼠标悬停在锚标记的链接文本上时，会在CSS中为div分配一个背景图像，这样会显示一个图像：

a#my-anchor:hover #my-image {
background: url('img/the-image.jpg') top left no-repeat;
}

使用jQuery，我想在#container中选择悬停状态下的锚标记，并使用具有背景的子div。这样做的正确方法是什么？

编辑：要改写它，我希望选择该链接，并显示背景图片，而不是用户将光标悬停在其上 - 只需让jQuery模仿悬停，可能是通过一些解决方法。

编辑＃2：以另一种方式改写：我希望链接文本具有相同的CSS，就像它悬停在上面一样，并且div中的背景图像出现 - 但是使用jQuery，没有人将光标悬停在链接上。

Answer 1

在你的CSS中，你可能有这样的事情：#my-anchor:hover {... 将其更改为：

#my-anchor:hover,
#my-anchor.active {
...

现在使用JS，就像这样：

$('#container').find('#my-anchor').addClass('active').delay(3000).removeClass('active')
// or just
$('#my-anchor').addClass('active').delay(3000).removeClass('active')

使用子div选择处于悬停状态的锚点

1 个答案: