2012-06-20 5 views
0

I의 구조는 다음과 같습니다부정적인 마진

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

$(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>"); 

}); 

링크가 보여 H1 태그 후 몇 가지 링크에 다음을 추가 JQuery와,하지만 난 이후를 내가 삽입했던 바깥 쪽 div에 -15px의 여백을 두는 것이 필요했다. (기술적 인 이유로 이것을해야했다.) 이제는 링크 위에 마우스를 가져 가면 오른쪽으로 마우스를 가져 가면된다. 그 아래에있다. 이 문제를 해결할 수있는 방법이 있습니까? 다른 게시물 누군가 링크를 수정하려면 아래의 코드를 사용하여 제안했지만 작동하지 않는, 아무것도 색을 변경하는, 그래서 나는 그것을 사용하는 방법을 잘 모르겠다.

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

id로 요소를 선택하는 데 100 개의 선택기를 사용할 필요가 없습니다. – undefined

+1

이 'red! important'를'red! important'로 변경하십시오. – undefined

+0

이 변경되었습니다. 그러나 그것은 일을 돕지 못했습니다. – user1015214

답변

0

단순히 사업부의 15 픽셀을 이동, 더 나은 CSS는해야한다 상대 위치 및 상단은 -15 픽셀입니다. 그것은 정적 위치를 계산하고 간단한 설명을 위해 -15의 수정을 추가합니다. 이것을 수행하면 여전히 호버 문제가 발생하는지 확인할 수 있습니다.

+0

나는 그 변화를 만들었지 만 여전히 문제가있다. – user1015214

+0

나는 단순히 삽입 된 코드를 id = content-header가있는 div 바로 뒤에 넣음으로써 문제를 해결했다. (어떤 이유로 나는 이전에 작동 할 것이라고 생각하지 않았다.) 그러나 제안에 감사 드리며, CSS postion은 갈 길이 멀다. – user1015214

0

코드가 #inner-title의 색상이 내부 anchor 태그,이 시도하지 DIV 변경 :

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

DEMO