0

私は次の構造を持っています：

<div id="content-header">
<h1 id="title">Athletics Calendar</h1>
</div>

h1タグの後にいくつかのリンクを追加する次のjquery

$(document).ready(function() {
$("body[class*=page-calendar-practices] #content-header h1#title").after("<div id='athletics_practice-schedule'><div id='inner-title'><a href='calendar/practices/games' class='athletics_links'>GAMES</a><a href='calendar/practices' class='athletics_links'>PRACTICES</a></div></div>");

});

リンクが表示されますが、挿入していた外側の div に -15px のマージンを設定する必要があったため (div をシフトするために... 技術的な理由でこれを行う必要がありました)、リンクにカーソルを合わせると何も表示されませんが、そのすぐ下にカーソルを合わせると表示されます。これを修正する方法はありますか？別の投稿で、誰かが以下のコードを使用してリンクを変更することを提案しましたが、機能せず、何も色が変わっていないため、それをどのように利用するかさえわかりません。

$(document).on('mouseenter', 'body[class*=page-calendar-practices] #content-header div#inner-title', function() {
$(this).css('color','red !important');
}).on('mouseleave', 'body[class*=page-calendar-practices] #content-header div#inner-title', function() {
$(this).css('color','blue !important');
});
4

2 に答える 2

0

単純に div を 15 ピクセル上に移動するには、より良い css を相対的に配置し、トップを -15 ピクセルにする必要があります。簡単な説明のために、静的位置を計算し、-15 の補正を追加します。これを行ってもホバーの問題が発生するかどうかを確認できますか。

于 2012-06-20T23:05:40.760 に答える
0

コードは#inner-titledivの色を変更し、そのanchor中のタグではありません。これを試してください：

$('#content-header').on('mouseenter', '#inner-title a', function() {
      $(this).css('color','red');                                
}).on('mouseleave', '#inner-title a', function() {
     $(this).css('color','blue');
});

デモ

于 2012-06-20T22:07:34.567 に答える