Question

嗨，你能看到我在jquery上做错了什么吗？当你将鼠标悬停在其中一个文本上时，我试图将其应用于css。错误与$（“。yo”）或（'blur'）有关;我联系他们错了？提前致谢

我已经编辑了jquery但是现在在mouseout上它和css保持一致？！

Jquery的：

$(".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;
}

Answer 1

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

Answer 2

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

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

我希望这是一个帮助

关心Christen

Answer 3

简化它 -

$('.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/

BTW - 最好为blur类使用另一个名称，这样就不会与.blur（）方法混淆。

Answer 4

更改此

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

到

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

EJ：

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

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

Jquery .siblings（）错误，我无法弄清楚

4 个答案: