0

我在 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');
});​
4

5 回答 5

4

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

http://jsfiddle.net/7bFKq/ 

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

}

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

​</p>

如果必须将鼠标悬停在 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;
}
于 2012-08-13T20:12:08.003 回答
2

jsFiddle 演示

只需寻找最接近的 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-13T20:14:29.833 回答
1

保留你拥有的 JavaScript，并添加这个 CSS 类：

.hover {
    background-color: #f00;
}

http://jsfiddle.net/RLjvB/

于 2012-08-13T20:11:47.313 回答
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;
}

演示

不需要 JS。

于 2012-08-13T20:18:03.977 回答
1

格雷格，有2点：

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

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

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

希望这可以帮助。

于 2012-08-13T20:43:09.513 回答