Question

HI，

我有这个代码用于提取href并将其添加到父块...

$(".new-dev").hover(function(){
    $(this).css('cursor','pointer');
    $('this').$('a').css('color','#696969');
},function(){
    $('this').$('a').css('color','#000');
});

我想要做的是在翻转时使块内的a变色。使用$(this)时不确定如何执行此操作。

欢迎任何建议。

谢谢， C

Answer 1

<强>更新我认为可以用CSS做到这一点，但这种方法不适用于所有浏览器，例如不是在IE6中。如果这对你很重要，那么你必须坚持使用JS方法我还更新了代码，因为我认为我知道你真正想要的是什么：

你去了（你的语法有误）：

$(".new-dev").hover(function(){
    $(this).css('cursor','pointer');
    $(this).find('a').css('color','#696969');
},function(){
    $(this).find('a').css('color','#000');
});

这会将颜色更改为使用类a的每个new-dev内部元素。但是，当您仅更改光标样式一次时，更好的解决方案可能是：

$(".new-dev").css('cursor','pointer').hover(function(){
    $(this).find('a').css('color','#696969');
},function(){
    $(this).find('a').css('color','#000');
});

首先将cursor样式应用于具有类new_dev的所有元素，然后应用悬停函数。无需一遍又一遍地在悬停功能中设置光标样式。

阅读文档中的selectors和traversing。

注意： color更改字体的颜色，如果要更改背景颜色，请使用background-color。

Answer 2

如果您希望在悬停在块上时更改块中的每个<a>，而不是每个锚点，这看起来就像您想要的那样单独

试试这个CSS，在这种情况下不需要javascript：

.new-dev { cursor: pointer; }
.new-dev a { color: #000; }
.new-dev:hover a { color: #696969; }

cursor只会影响鼠标，最好将其留在CSS中：）

但是，如果你想在颜色之间动画而不是仅仅切换，你可以这样做（仍然将光标规则保留在CSS中）：

$(".new-dev").hover(function(){
    $('a', this).stop().animate({ 'color' : '#696969' });
},function(){
    $('a', this).stop().animate({ 'color' : '#000000' });
});

这会在颜色之间平滑淡出，但你需要jQuery color plugin found here :)
Here's a quick demo of this approach

Answer 3

如果我认为你真正需要的是你需要设置锚元素的样式，以便在悬停事件中对css进行某种更改。你可以用css

做到这一点

.new-dev a{
color:#000;
}

.new-dev:hover a{
color:#696969;
cursor:pointer;
}

如果我误解了你的问题，请用一些HTML更新。

Answer 4

你可能想看看我前段时间写的这个jQuery插件：可点击。如果您在要点击的块上调用它，例如$(".new-dev").clickable();，则它会提取每个块中第一个链接的href值，并使用该值导航到用户单击块时。

对于样式或其他脚本，它将以下classNames添加为钩子：在匹配的块上：

.jsClickable
.jsClickableHover（onmouseover，因为IE6不支持：将鼠标悬停在链接以外的元素上）
.jsClickableFocus（当引导链接获得焦点时）

在提供目标位置的链接上：

.jsGuide

所以这里的CSS将是：

.new-dev.jsClickable { cursor: pointer; }
.new-dev a { color: #000; }
.new-dev a:hover, .new-dev a:focus,
.jsClickableHover a.jsGuide, .jsClickableFocus a.jsGuide { color: #696969; }

这样，只有在启用JavaScript时，光标才会成为指针，如果获得焦点，链接也会改变颜色，这使得键盘导航更容易访问。

有关下载+文档的信息，请参阅插件页面：jQuery: clickable — jLix

Jquery可点击块

4 个答案: