Jquery .siblings（）錯誤，我不明白

嗨，你可以看到我在做什麼錯誤的jQuery？我試圖讓你將鼠標懸停在其中一個文本上時，其他兩個CSS將應用於該文本。錯誤在於使用$（「.yo」）或（'blur'）;我連接他們錯了？在此先感謝Jquery .siblings（）錯誤，我不明白

我編輯了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; 
}

來源

2012-12-27 maxmitch

'a.blur'元素不是'a.yo'的兄弟元素;他們是小孩。兄弟姐妹分享父母。 – kevingessner

乾杯。你知道如何讓他們的兄弟姐妹嗎？ – maxmitch

你必須改變你的HTML。或者你只是想使用'.children（）'？ – kevingessner

它簡化到這一點 -

$('.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（）方法混淆。

來源

2012-12-27 17:26:43

我想要發生的步驟： 1）正常的css（.blur） 2）**鼠標懸停**其他css應用（.out和.textshadow ）到sibllings 3）** mouse out **回到第1部分 – maxmitch

我對列出的jQuery進行了更改。你所要做的就是聲明CSS模糊和文字陰影。當然，你可以在CSS中完成所有這些，而無需使用jQuery。 –

它現在只是使整個事情使用CSS。謝謝你的幫助！你怎麼能用css來做到這一點？（）。（）。（）。（）。（）。（）。）（）。 $（this）.siblings（）。removeClass（'textshadow out'）; }）; ------- 這是最接近我想要什麼，但在這裏鼠標出它仍然留下一切模糊！ – maxmitch

.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-27 16:53:07 h2ooooooo

@downvote - 爲什麼？ – h2ooooooo

你的第一個例子無效 – Alexander

好吧，你明確地得到了兄弟功能的問題。您可以使用「喲」類作爲選擇器，並請求其兄弟姐妹。它沒有兄弟姐妹！你需要得到它的孩子，因爲所有其他的鏈接都是「喲」的孩子。

由於我沒有真正測試過你的代碼，所以很難判斷你是否有其他問題。但是，在鏈接裏面有3個鏈接對我來說似乎也很奇怪？重點是什麼？爲什麼不是一個div內的3個鏈接？

我希望這是一個幫助

問候克里森

來源

2012-12-27 17:00:46

更改此

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

來源

2012-12-27 17:07:26 karacas

這似乎沒有工作。在我的或jsbin的例子中。 – maxmitch

那麼它的作品！如果你看看「你好我的名字」只是似乎改變顏色，我希望它看起來像你剛纔把鼠標放在「是」 – maxmitch

那樣？ > http://jsbin.com/ajokok/3/edit – karacas

Jquery .siblings（）錯誤，我不明白

回答

相關問題