在鼠标上改变div的颜色

我在div内有一行文字（一个链接）。我想让鼠标在链接上改变div颜色。我尝试过各种不成功的事情。你可以在这里看到我目前的代码：http://jsfiddle.net/Grek/D3TzM/请注意，我不一定在寻找一个jQuery解决方案。韩国社交协会的帮助在鼠标上改变div的颜色

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

来源

2012-08-13 Greg

更改此：

.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要求。

来源

2012-08-13 20:18:03 snuffn

非常感谢，这就是我一直在寻找的！ – Greg 2012-08-13 20:26:00

让你有JavaScript和添加此CSS类：

.hover { 
    background-color: #f00; 
}

http://jsfiddle.net/RLjvB/

来源

2012-08-13 20:11:47 wanovak

为什么选择投票？需要JavaScript来满足OP的请求。 – wanovak 2012-08-13 20:15:34

你可以在下面选择一个伪类，如: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; 
}

来源

2012-08-13 20:12:08 Fresheyeball

OP的要求是在'a'悬停时改变'div'背景。 – wanovak 2012-08-13 20:13:11

@wanovak为什么他会希望用户在触发颜色变化之前将鼠标放入div的链接部分？如果这确实是要求，我会认为这是优越的。 – Fresheyeball 2012-08-13 20:14:57

不知道，但这就是他要求的。 – wanovak 2012-08-13 20:16:43

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

来源

2012-08-13 20:14:29

格雷格，有2点：

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

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

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

希望这会有所帮助。

来源

2012-08-13 20:43:09

感谢您的详细解答。我在头部调用包含脚本的js文件。这可以吗？ – Greg 2012-08-13 20:46:09

建议将它放在页面底部。
我通常有2个.js文件：一个是页眉，一个是页脚。如果你真的想把它包含在部分，你可能想把jquery代码放到一个文档就绪函数中，以便脚本在元素加载后执行。 $（document）.ready（function（）{ .... }）; – 2012-08-13 20:53:19

好的谢谢你的解释！ – Greg 2012-08-13 20:57:47

在鼠标上改变div的颜色

回答

相关问题