0

こんにちは、私がjqueryで間違っていることがわかりますか? CSSが適用されるテキストの1つにカーソルを合わせると、他の2つが適用されるようにしようとしています。エラーは $(".yo") または ('blur'); に関係しています。私はそれらを間違ってリンクしていますか？前もって感謝します

私はjqueryを編集しましたが、マウスアウトではcssがオンのままになりますか?!

Jクエリ:

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

これに単純化します-

$('.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 に答える
1

兄弟機能に間違いなく問題があります。「yo」クラスをセレクターとして使用し、その兄弟を要求するときに使用します。兄弟はいません！他のすべてのリンクは「yo」の子であるため、その子を取得する必要があります。

私はあなたのコードを実際にテストしていないので、他の問題があるかどうかを判断するのは難しい. しかし、1 つのリンク内に 3 つのリンクがあるのも奇妙に思えます。ポイントは何ですか？div 内に 3 つのリンクがないのはなぜですか?

これが助けになることを願っています

よろしくクリステン

于 2012-12-27T17:00:46.180 に答える
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 に答える