Javascript 在鼠标悬停时更改div颜色

我有一行文字（链接）在一个div。我想div的颜色改变鼠标在链接上。我尝试了各种各样的事情，但都没有成功。您可以在这里看到我当前的代码：注意，我不一定要寻找jquery解决方案。谢谢你的帮助

CSS

JS:

---

保留现有的JavaScript，并添加以下CSS类：

.hover {
    background-color: #f00;
}

---

您可以在下面选择一个伪类，如

：hover

。这根本不需要javascript

​

---

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

css基本上是一样的，只是

：hover

到

。hover

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

}

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

只需查找最近的div，immidate

.parent（）

是一个

标记（除非您这样做，否则不会自动阻止元素）

更改如下：

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

致：

这是：

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

致：

不需要JS。

Greg， 有两点：

1） 函数的参数应该是两个处理程序。 一个用于handlerin（鼠标悬停）和一个用于handlerout（鼠标悬停）。只给出一个参数将该参数用作输入输出处理程序，即两个鼠标事件的同一处理程序

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

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

…您的HTML代码。。。
$（'a'）。悬停（函数（）{
$（this.parent（）.toggleClass（'hover'）；
});​

---

希望这有帮助。

OP的要求是在

a

悬停时更改

div

背景。@wanovak为什么希望用户在触发颜色更改之前将鼠标移到div的链接部分？如果这真的是要求，我会说这是优越的。不知道，但这是他要求的。非常感谢你！有趣的非js解决方案！为什么要投反对票？JavaScript需要满足OP的要求。非常感谢，这就是我要找的！谢谢你详细的回答。我正在调用包含我头部部分中的脚本的js文件。可以吗？最好放在这一页的底部
我通常有2个.js文件：一个作为页眉，一个作为页脚。如果您真的希望将其包含在部分中，那么您可能希望将jquery代码放入一个文档就绪函数中，以便脚本在加载元素后执行$（document）.ready（function（）{….}）；

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

}

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

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

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

.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;
}

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