在鼠标上改变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

更改此：

.source-title-box a 
{ 
    color:#467FD9; 
    display:block; 
    text-decoration:none;  
} 

到：

.source-title-box a 
{ 
    color:#467FD9; 
    display:block; 
    text-decoration:none; 
    padding:15px; 
} 

这：

.source-title-box 
{ 
    color: #000; 
    background: #fff; 
    padding: 15px; 
    width: 200px; 
    position: relative; 
    margin-top:10px; 
    border: 1px dotted #666; 
} 

到：

.source-title-box 
{ 
    color:#000; 
    background:#fff; 
    width:230px; 
    position:relative; 
    margin-top:10px; 
    border:1px dotted #666; 
} 

DEMO

没有JS要求。

Answer 2

让你有JavaScript和添加此CSS类：

.hover { 
    background-color: #f00; 
} 

http://jsfiddle.net/RLjvB/

Answer 3

你可以在下面选择一个伪类，如:hover。完全不需要JavaScript。

http://jsfiddle.net/7bFKq/

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

} 

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

---

如果必须与一个悬停做到这一点，你需要的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; 
} 

Answer 4

jsFiddle DEMO

只要看看最近的DIV中，immidiate.parent()是<span>标签（它们不会自动阻止元素，除非您以这种方式制作元素）。

$('.activity-title a').on('mouseover', function() { 
    $(this).closest('div').toggleClass('hover'); 
}); 

$('.activity-title a').on('mouseout', function() { 
    $(this).closest('div').toggleClass('hover'); 
}); 

Answer 5

格雷格， 有2点：

1）的jquery .hover（）函数需要两个处理程序作为参数。 一个用于处理程序（鼠标悬停）和一个用于处理程序（鼠标悬停）。只给出一个参数使用该参数作为入出处理程序，即两个鼠标事件都使用相同的处理程序。

2）确保您写下的脚本（js）包含在页面的底部。即在关闭“body”标签之前。
这是因为：脚本执行时可能未加载html元素。

...Your HTML Code... 
<script> 
    $('a').hover(function(){ 
    $(this).parent().toggleClass('hover'); 
    });​ 
</script> 
</body> 

希望这会有所帮助。