javascript - 鼠标悬停改变div颜色

Question

我在一个 div 中有一行文本(一个链接)。我希望 div 颜色在鼠标悬停在链接上时发生变化。我尝试了各种事情但没有成功。你可以在这里看到我当前的代码:http://jsfiddle.net/Grek/D3TzM/请注意，我不一定要寻找 jquery 解决方案。谢谢你的帮助

CSS

.source-title-box a{
    color:#467FD9;
    display:inline-block;   
}
.source-title-box a:hover{
    color:#666666;
}
.source-title-box hover{background:#cb2326;}

JS:

$('a').hover(function(){
    $(this).parent().toggleClass('hover');
});​

Answer 1

你可以在下面选择一个伪类，比如:hover。根本不需要 javascript。

http://jsfiddle.net/7bFKq/

.source-title-box:hover{
    background-color:#467FD9;

}

.source-title-box:hover a{
    color:#FFFFFF;
}

---

如果您必须将鼠标悬停在 a 上，则需要 javascript。

http://jsfiddle.net/7wwdb/

$('a').hover(function(){
    // .closest will get you to the div regardless of what might
    // be in between. With .parent you get to the absolute parent, which
    // in your case is a span
    $(this).closest('.source-title-box').toggleClass('hover');
});​

css基本一样，只是:hover到.hover

.source-title-box.hover{
    background-color:#467FD9;

}

.source-title-box.hover a{
    color:#FFFFFF;
}