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 に答える