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

Answer 2

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 3

保留您拥有的JavaScript，并添加此CSS类：

.hover {
    background-color: #f00;
}

http://jsfiddle.net/RLjvB/

Answer 4

更改此内容：

.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 5

格雷格有2点：

1）jquery .hover（）函数需要两个处理程序作为参数。一个用于处理程序（鼠标悬停）和一个用于句柄（鼠标输出）。只给出一个参数将该参数用作In-Out处理程序，即两个鼠标事件的处理程序相同。

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

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

希望这有帮助。

鼠标悬停时更改div颜色

5 个答案: