negative margins with jquery created links
<p>I have the following structure:</p>

<pre><code>&lt;div id="content-header"&gt;
&lt;h1 id="title"&gt;Athletics Calendar&lt;/h1&gt;
&lt;/div&gt;
</code></pre>

<p>and the following jquery which adds in some links after the h1 tag</p>

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

});
</code></pre>

<p>The links show up, but since I needed to put a margin of -15px on the outer div which I was inserting (to shift up the div... I needed to do this for technical reasons), now if you hover over the link nothing shows, but if you hover right below it it does. Is there a way to fix this? I a different post someone suggested using the code below to modify the links, but its not working, nothing is changing color, so I'm not even sure if how to make use of that.</p>

<pre><code>$(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');
});
</code></pre>
