CSS NavBar 전환 문제

내 탐색 표시 줄 호버 효과에 문제가 발생하면 특별히 전환됩니다 (줄 109/110). 본질적으로 나는 다른 링크가 0의 여백을 유지하는 동안 마우스가 2 %의 마진 상승을 올리는 데 마우스를 올려 놓는 링크를 원합니다. 문제는 모든 링크 여백이 내가 그 (것)들 중 하나를 가리킬 때마다 2 % 씩 증가한다는 것입니다. 그 게시판 규칙이 어긋나거나이 질문이 분명하지 않은 경우 지저분한 코드에 대해 유감스럽게 생각합니다. 나는 abit를 위해 그것을 가지고 놀았고 couldnt는 그것을 이해한다. 또한 그것은 간단한 경우 어떻게 자바 스크립트를 사용하여 그것을 알아낼 수 있습니다.
건배CSS NavBar 전환 문제

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
      Atticus Products 
    </title> 

<script src="http://code.jquery.com 
/jquery-1.9.1.js"> 
</script> 
<script> 


/* 

$(document).ready(function(){ 
    $("a").hover(function(){ 
    $("a").animate({up:'250px'}); 
    }); 
}); 
*/ 
</script> 



<style> 
    html, body { 
     height:100%; 
     width:100%; 
     margin:0; 
     padding:0; 
     font-size:100%; 
     background-color:#6ec247; 
     font-family: CaeciliaLTStd75Bold,Helvetica,Arial,Sans-serif;  
     } 


    #wrapper { 
     margin: 0 auto; 
     width: 50%; 
     height: 100%; 
     position: relative; 
    } 

    /*Header: Contains Logo and NavBar*/ 
    #header { 
     border-bottom: 8px solid #f2f2f2; 
     overflow:hidden; 
     height: auto; 
     position:relative; 
     clear:both; 
     height:auto; 
     margin:0; 
     display:block;   
    } 

    #logoName { 

     max-width: 100%; 
     width:40%; 
     float:left; 
     height:150px; 
    } 

    #logoName a { 
     position:absolute; 
     bottom:0; 
     color:#FFFFFF; 
     text-decoration: none; 
     font-size:3em; 
     font-weight: bold; 
    } 


    /*NavBar*/ 
    #nav { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     text-align: right; 
     right:0; 
     width:60%; 
     float:right; 
     position:absolute; 
     bottom:0; 
    } 

    #nav li { 
     display: inline; 


    } 

    #nav li a { 
     display: inline-block; 
     padding: 8px 15px; 
     text-decoration: none; 
     font-weight: bold; 
     color: #FFFFFF; 
     font-size:1em; 
     margin-bottom:0; 
    } 


    #nav li a:hover { 
     color: #c00; 
     background-color: #000000; 
     opacity:0.5; 
     transition-property: margin-bottom; 
     transition-duration:4s; 
     margin-bottom:2% 
/*this is where the problem is*/  
    } 


/*Content: Contains Container1, LogoWords and Logo1*/ 

    #content { 
     height: 60%; 
     text-align: center; 
     /*background-color: #4d8e2f;*/ 
     color:#FFFFFF; 
     margin:0; 
     top:0; 
     display:relative; 
     font-weight: bold; 
    } 

    #container1 { 
     display: block; 
     max-width: 100%; 
     position:relative; 
     height:40.5%; 
     width:100%; 
     margin:0; 
     background-color:#6ec247 ; 
     z-index:0; 
     border-bottom: 8px solid #f2f2f2; 
    } 

    #logoWords{ 
     z-index:1; 
     display:block; 
     position:absolute; 
     width:auto; 
     height:auto; 
     top:18.5%; 
     right:0; 
     color:#FFFFFF; 
     text-decoration: none; 
     font-size:2.5em; 
     font-weight: bold; 
     text-align:left; 
    } 



    #logo1 { 
     display:block; 
     z-index:1; 
     position:absolute; 
     left:0; 
     top:18.5%; 
     width:auto; 
     height:auto; 
    } 



    #content{ 
     background-color:#6ec247 ; 
    } 


    #content p { 
     margin:0; 
    } 


    #footer { 
     height:10%; 
     width: 100%; 
     position: absolute; 
     bottom: 0; 
     background-color: #f2f2f2; 
     border-bottom: 1px solid #ccc; 
     border-top: 1px solid #ccc; 
    } 




</style> 
</head> 
<body> 

<div id="wrapper"> 
<div id="header"> 


    <ul id="nav"> 
     <li><a href="index.html">About</a></li> 
     <li><a href="ourapproach.html">Our Approach</a></li> 
     <li><a href="careers.html">Careers</a></li> 
     <li><a href="contact.html">Contact</a></li> 
    </ul> 



    <div id="logoName"> 
    <a href="index.html">Atticus <br>Products</br></a> 
    </div> 




</div> 

<div id="content"> 

    <div id="container1"> 
    </div> 

    <img id="logo1" src="image/justlogo.png" alt="logo" width="207" 
     height="214"> 

    <div id="logoWords"> 
    <p><br>We find the people</br> that make your company succeed</p> 
    </div> 



    <div id="content"> 
    <p> 
     <br>Careers with Atticus</br> 

    </p> 
    </div> 
</div> 


<div id="footer"> 
    <p>bam</p> 
</div> 

</div> 
</body> 
</html>

출처

2013-05-22 user2395474

귀하의 문제는 jQuery를에 있습니다. $('a').animate이 있으므로 페이지의 모든 요소에 영향을줍니다. 'a'를 'this'로 변경하여이 문제를 해결할 수 있습니다.

$(document).ready(function(){ 
    $("a").hover(function(){ 
    $(this).animate({up:'250px'}); 
    }); 
});

이렇게하면 요소를 덮어 씁니다. 행운을 빈다.

출처

2013-05-22 01:38:21 theDibo

** 감사합니다. JQuery가 작동하지만 전환을 사용하는 것과 동일한 결과가 나타납니다 (모든 링크가 발생합니다). $ (document) .ready (function() { $ ("a") { $ (this)} 이니메이트 ({marginRight : "2 %"} "느림") }) }); '주위를 놀고 내가 바꾼 것과 비슷한 효과를 얻을 수있었습니다. 세로 형 NavBar로 가져 가면 호버 효과가 변경되어 개별 링크가 왼쪽/오른쪽으로 이동합니다. #Nav, # Nav li 및 #Nav li a의 CSS에 문제가있는 것 같습니다. 특히 디스플레이, 플로트 및 위치. ** – user2395474

CSS NavBar 전환 문제

답변

관련 문제