0

我的导航栏悬停效果特别是过渡（第 109/110 行）有问题。本质上，我希望鼠标悬停在哪个链接上提高（边距增加 2%），而其他链接保持边距为 0。问题是，每当我将鼠标悬停在其中任何一个链接上时，所有链接边距都会增加 2%。如果我违反了任何发布规则和/或这个问题根本不清楚，这是我第一次为凌乱的代码发帖，非常抱歉。我玩了一下它，但无法弄清楚。此外，如果它更简单，我可以弄清楚如何使用 javascript 来做到这一点。
干杯

<!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>
4

1 回答 1

1

您的问题出在您的 jQuery 中。因为你拥有$('a').animate它会影响页面上的每个元素。您可以通过不带引号将 'a' 更改为 'this' 来解决此问题。

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

这只会影响悬停在上面的元素。祝你好运。

于 2013-05-22T01:38:21.800 回答