Javascript 导航条转换故障_Javascript_Css

Javascript 导航条转换故障

javascript css

Javascript 导航条转换故障,javascript,css,Javascript,Css,我的导航栏悬停效果有问题（第109/110行）。基本上，我希望鼠标悬停在哪个链接上提升（边距增加2%），而其他链接保持0的边距。问题是，每当我将鼠标悬停在任何一个链接上时，所有链接边距都会增加2%。这是我第一次发帖，如果我违反了发帖规则和/或这个问题根本不清楚的话，我为代码混乱感到抱歉。我把它玩弄了一段时间，弄不明白。此外，如果它更简单，我可以找出如何使用javascript来实现它。干杯 <!DOCTYPE html> <html> <head>

我的导航栏悬停效果有问题（第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>


阿提库斯产品
/*
$（文档）.ready（函数（）{
$（“a”）.hover（函数（）{
$（“a”）.animate（{up:'250px'}）；
});
});
*/
html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
字体大小：100%；
背景色：#6ec247；
字体系列：CaeciliaLTStd75Bold、Helvetica、Arial、无衬线字体；
}
#包装纸{
保证金：0自动；
宽度：50%；
身高：100%；
位置：相对位置；
}
/*标题：包含徽标和导航栏*/
#标题{
边框底部：8px实心#F2F2；
溢出：隐藏；
高度：自动；
位置：相对位置；
明确：两者皆有；
高度：自动；
保证金：0；
显示：块；
}
#商标名{
最大宽度：100%；
宽度：40%；
浮动：左；
高度：150像素；
}
#商标名a{
位置：绝对位置；
底部：0；
颜色：#FFFFFF；
文字装饰：无；
字号：3em；
字体大小：粗体；
}
/*导航栏*/
#导航{
保证金：0；
填充：0；
列表样式：无；
文本对齐：右对齐；
右：0；
宽度：60%；
浮动：对；
位置：绝对位置；
底部：0；
}
#李海军{
显示：内联；
}
#李娜{
显示：内联块；
填充：8px 15px；
文字装饰：无；
字体大小：粗体；
颜色：#FFFFFF；
字号：1em；
页边距底部：0；
}
#导航李a：悬停{
颜色：#c00；
背景色：#000000；
不透明度：0.5；
过渡性质：边缘底部；
过渡时间：4s；
利润率下限：2%
/*这就是问题所在*/
}
/*内容：包含Container1、LogoWords和Logo1*/
#内容{
身高：60%；
文本对齐：居中；
/*背景色：#4d8e2f*/
颜色：#FFFFFF；
保证金：0；
排名：0；
显示：相对；
字体大小：粗体；
}
#集装箱1{
显示：块；
最大宽度：100%；
位置：相对位置；
身高：40.5%；
宽度：100%；
保证金：0；
背景色：#6ec247；
z指数：0；
边框底部：8px实心#F2F2；
}
#标识词{
z指数：1；
显示：块；
位置：绝对位置；
宽度：自动；
高度：自动；
最高：18.5%；
右：0；
颜色：#FFFFFF；
文字装饰：无；
字号：2.5em；
字体大小：粗体；
文本对齐：左对齐；
}
#标识1{
显示：块；
z指数：1；
位置：绝对位置；
左：0；
最高：18.5%；
宽度：自动；
高度：自动；
}
#内容{
背景色：#6ec247；
}
#内容p{
保证金：0；
}
#页脚{
身高：10%；
宽度：100%；
位置：绝对位置；
底部：0；
背景色：#F2F2；
边框底部：1px实心#ccc；
边框顶部：1px实心#ccc；
}







我们找到了使贵公司成功的人


阿提库斯的职业生涯


砰

您的问题在jQuery中。因为您有

$（'a'）。设置动画将影响页面上的每个a元素。
您可以通过将“a”更改为“this”而不使用引号来解决此问题
$(document).ready(function(){
  $("a").hover(function(){
    $(this).animate({up:'250px'});
  });
});

这只会影响悬停在其上的元素。
祝你好运。
谢谢，我让JQuery运行起来了，但结果与使用转换（所有链接都会提升）一样。$（文档）.ready（函数（）{$（“a”）.hover（函数（）{$（this）.animate（{marginRight:“2%”，}，“slow”）；}）我到处玩，能够得到与我想要的效果相似的效果，例如将其更改为垂直导航栏，然后更改悬停效果以左/右移动单个链接。我觉得这是一个与#Nav、#Nav li和#Nav li a的CSS有关的问题。特别是显示、浮动和定位。