CSS NavBar Transition Trouble

У меня возникают проблемы с переходом на навигационную панель, особенно переходы (строка 109/110). По сути, я хочу, какая бы связь между мышью не зависела от повышения (увеличение маржи на 2%), в то время как другие ссылки занимают запас 0. Проблема заключается в том, что все поля ссылок увеличиваются на 2% всякий раз, когда я нахожусь на любом из них. Его первое сообщение, извинившееся за грязный код, если я нарушил правила публикации и/или если этот вопрос был неясным вообще. Я играл с ним для abit и не мог понять это. Кроме того, если это проще, я могу понять, как это сделать, используя javascript.
ПриветствияCSS NavBar Transition Trouble

<!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"). Hover (function () { $ (this) .animate ({marginRight: "2%"}, "slow"); }); }); 'Ive играл вокруг и получал подобные эффекты от того, что я хочу, это к вертикальному NavBar, а затем изменению эффектов наведения для сдвига отдельных ссылок влево/вправо. Я чувствую, что это проблема с CSS #Nav, #Nav li и #Nav li a. В частности, отображение, поплавок и положение. ** – user2395474

CSS NavBar Transition Trouble

ответ

Смежные вопросы