jQuery : 정적 CSS 상단에 CSS hover가 있습니까?

탐색을 만들고 버튼에 대한 CSS 속성을 이미 만들었습니다.jQuery : 정적 CSS 상단에 CSS hover가 있습니까?

고정 버튼 속성 위에 마우스를 올리면 속성이 사라집니다.

이 작업을 수행하는 가장 효율적인 방법은 무엇입니까?

는 CSS는 다음과 같습니다

<div id="nav"> 
    <form method="post" action=""> 
     <a>Home</a> 
     <a>Link2</a> 
     <a>Link3</a> 
    </form> 
</div> 

#nav { 
position:absolute; 
margin-top:96px; 
margin-left:30px; 
height: 450px; 
width: 140px; 
font-family:"Book Antiqua";} 

#nav a { 
background:url(Images/Button.png); 
height:28px; 
width:130px; 
font-family:"Book Antiqua"; 
font-size:14px; 
text-align:center; 
color:#C60; 
text-decoration:none; 
background-position:center; 
margin:auto; 
display:block; 
position:relative; 
line-height:190%; 
} 

#nav a:hover { 
background:url(Images/Button%20Hover.png); 
height:34px; 
width:140px; 
font-family:"Book Antiqua"; 
font-size:16px; 
text-align:center; 
color:#C60; 
text-decoration:none; 
margin:-3px; 
z-index:2; 
line-height:210%; 
text-indent:-10px;} 

#nav a:active { 
background:url(Images/Button%20Hover.png); 
height:34px; 
width:140px; 
font-family:"Book Antiqua"; 
font-size:14px; 
text-align:center; 
color:#862902; 
text-decoration:none; 
margin:0 -3px; 
z-index:2;}

감사합니다.

출처

2012-06-11 Aaron

한 가지는 당신이 당신의 CSS를 상당히 간소화 할 수 있다는 것입니다. 변경되지 않는 탐색 속성 (예 : font-family). #nav 블록에있는 블록을 설정하고 변경하지 않으려면 하위 라인을 재설정하지 마십시오. 나중에 해당 속성을 변경하려는 경우 훨씬 쉽게 만듭니다. – Brian

사용 transition CSS의 재산 ...

-webkit-transition:all .3s; 
-moz-transition:all .3s; 
-o-transition:all .3s; 
-ms-transition:all .3s;

... #nav a 이것은 구글 크롬, 모질라 파이어 폭스, 오페라와 최신 IE에서 작동

을 ...이 추가

출처

2012-06-11 15:39:11 shahbaz

네비게이션이 수직이고 버튼이 움직이는 것처럼 조금 아래로 움직이기 때문에 이것은 굉장합니다. – Aaron

jQuery로이 작업을 수행하려는 경우 다음과 같이 마우스를 가져 가면 다음과 같이 나타납니다.

#nav a:hover, #nav a.j-hover { .... }

지금과 같이 jQuery를에 hover으로 toggleClass 기능을 사용 : 정말 호버 질문에 관련이 없습니다

$('#nav a').hover(function() { 
     $(this).toggleClass("js-hover", 1000); 
});

출처

2012-06-11 15:46:21

jQuery : 정적 CSS 상단에 CSS hover가 있습니까?

답변

관련 문제