2

CSSとjqueryを使用して、ホバー時にぼかし効果を使用しています。テキストの 1 つにカーソルを合わせると、css の特定の部分が jquery を使用して兄弟に適用されます。リンクを見ると、「音楽」テキストはハイパーリンクされておらず、ホバーすると思いどおりに動作します。しかし、残りはリンクされており、ハイパーリンクされているときに「音楽」のように動作するようにしたい.

CSS:

.blur {
text-decoration: none;
color: #339;
-webkit-transition: 400ms ease 100ms;
-moz-transition: 400ms ease 100ms;
transition: 400ms ease 100ms;

}  

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


a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
opacity:none;
}
4

1 に答える 1

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

Fiddle - すべてのテキストはハイパーリンクされています。


または、同じ JS を ( なしで.children()) 保持して、CSS セレクターを編集することもできます。

.blur.blur a
.textshadow_.textshadow a

フィドル

于 2012-12-30T22:16:14.697 に答える