0

こんにちは私はcssとphpに不慣れです私は私のphpサイトでそれを使おうとしました私はホバーで画像を変更しようとしていますが次のようにcssを持っていますがエラーが発生し、半分の画像のみが変更されます...

ここに画像の説明を入力してください

私が使用している画像は、

ここに画像の説明を入力してください

ここに画像の説明を入力してください

私のCSSコードは、

#header #nav a {
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("../design/nav-l.png") 0 -35px no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("../design/nav-r.png") 100% -35px no-repeat; 
    line-height:35px;
}
#header #nav a:hover { background-position:0 -100px; }
#header #nav a:hover span { background-position:100% -70px; }

よろしくお願いします！

よろしくお願いします、

4

2 に答える 2

0

同じCSS値で％とpxを混在させることはできません。

background:url("../design/nav-r.png") 100% -35px no-repeat;
#header #nav a:hover span { background-position:100% -70px; }

これらの2行は無効なCSSであり、おそらくパーサーがおかしくなります。％またはpxのいずれかを使用して設定することから始めますが、両方の組み合わせは使用しないでください。

background-position: 100px -35px; <--- OK  
background-position: 100% 50% <--- OK  
background-position: 100% 100px <--- Invalid

その後UIが正しく動作しない場合は、FirebugなどのWebインスペクター、またはブラウザーに組み込まれているインスペクターを使用して、内部で何が起こっているかを確認する必要があります。これはしばしばあなたのスタイルの何が悪いのかについてあなたに大きな手がかりを与えるでしょう。

Webインスペクターを使用して自分で問題を修正しようとしても問題が解決しない場合は、質問をより詳細に更新してください（何を試したか、結果はどうでしたか）。問題の修正を支援するためのより良いショットがあります:)

于 2012-05-08T07:52:02.810 に答える
0

以下のコードでは、nav-rは小さな画像であり、nav-bgは大きなbg画像です。 

#header #nav a {
    color: #fff;
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("nav-r.png") 0 -35px no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("nav-bg.png") 100% -35px no-repeat; 
    line-height:35px;
}
#header #nav a:hover { background-position:0 -70px; }
#header #nav a:hover span { background-position:100% -70px; }
</style>
</head>
<body>
<div id='header'>
    <div id='nav'>
        <a href='#'><span>Rajan Rawal</span></a>
    </div>
</div>
</body>
</html>

これを適切にチェックしたら、以下のcssを変更して、魔法を見てください。

#header #nav a {
    color: #fff;
    float:left;
    margin-left:7px; 
    padding-left:17px; 
    background:url("nav-r.png") 0 0 no-repeat; 
    text-decoration:none;
}
#header #nav a span {
    float:left; 
    display:block; 
    padding-right:17px; 
    background:url("nav-bg.png") 100% 0 no-repeat; 
    line-height:35px;
}
于 2012-05-08T08:22:44.200 に答える