0

嗨，你能看到我在 jquery 上做错了什么吗？我试图做到这一点，当您将鼠标悬停在其中一个文本上时，其他两个将应用 css。错误与 $(".yo") 或 ('blur'); 我把它们链接错了吗？提前致谢

我已经编辑了 jquery，但现在在 mouseout 上它仍然与 css 保持一致？！

查询：

$(".blur").mouseover(function(){
    $(this).siblings().addClass('blur textshadow');     }).mouseout(function(){
    $(this).siblings().removeClass('textshadow out');
});

HTML：

<div class="yo">
<div class="blur out" id="one"> hi </div>
<div class="blur out" id="two"> my </div>
<div class="blur out" id="three"> name </div>
</div>

CSS：

div.blur
{
text-decoration: none;
color: #339;
}

div.blur:hover, div.blur:focus
{
text-decoration: underline;
color: #933;
}

.textshadow div.blur, .textshadow div.blur:hover, .textshadow div.blur:focus
{
text-decoration: none;
color: rgba(0,0,0,0);
outline: 0 none;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;
}

.textshadow div.blur,
.textshadow div.blur.out:hover, .textshadow div.blur.out:focus
{
text-shadow: 0 0 4px #339;
}

.textshadow div.blur.out,
.textshadow div.blur:hover, .textshadow div.blur:focus
{
text-shadow: 0 0 0 #339;
}
4

4 回答 4

2

.blur是孩子 - 用$(this).children().

<a class="yo">
    <a class="blur out" id="one"> hi </a>
    <a class="blur out" id="two"> my </a>
    <a class="blur out" id="three"> name </a>
</a>

也就是说，你不应该嵌套<a>标签。你确定你不是要使用div标签吗？

.blur是兄弟姐妹 - 用$(this).siblings().

<a class="yo">whatever</a>
<a class="blur out" id="one"> hi </a>
<a class="blur out" id="two"> my </a>
<a class="blur out" id="three"> name </a>
于 2012-12-27T16:53:07.487 回答
1

好的，您肯定遇到了兄弟姐妹功能的问题。您使用“yo”类作为选择器，并在询问其兄弟姐妹时使用。它没有兄弟姐妹！您需要获取它的孩子，因为所有其他链接都是“哟”的孩子。

由于我还没有实际测试过您的代码，因此很难判断您是否还有其他问题。但对我来说，在一个链接中有 3 个链接似乎也很奇怪？重点是什么？为什么 div 内没有 3 个链接？

我希望这是一个帮助

问候克里斯汀

于 2012-12-27T17:00:46.180 回答
1

将其简化为 -

$('.blur').hover(
    function(){
        $(this).siblings().addClass('out textshadow');
},  function() {
        $(this).siblings().removeClass('out textshadow');
});

将您的 CSS 修改为此 -

.blur { 
    text-decoration: none; 
    color: #339; }  
div.blur:hover, div.blur:focus {
    text-decoration: underline; 
    color: #933; }  
.textshadow { 
    text-decoration: none; 
    color: rgba(0,0,0,0); 
    outline: 0 none; 
    -webkit-transition: 400ms ease 100ms; 
    -moz-transition: 400ms ease 100ms; 
    transition: 400ms ease 100ms; }  
.out {
    text-shadow: 0 0 4px #339;}

这是一个工作示例：http: //jsfiddle.net/r2gQ3/

顺便说一句 - 最好为 blur 类使用另一个名称，以免与 .blur() 方法混淆。

于 2012-12-27T17:26:43.347 回答
0

改变这个

$(".yo").mouseover(function(){

到

$(".yo > div").mouseover(function(){

乙：

$(document).ready(function(){
    $(".yo > div").mouseover(function(){
        $(this).siblings().addClass('blur');
    }).mouseout(function(){
        $(this).siblings().removeClass('blur');
    }); 
});

测试：http: //jsbin.com/ajokok/1/edit

于 2012-12-27T17:07:26.190 回答