9

画像で構成されるメニューが必要です。誰かがその周りにカーソルを合わせると、画像が変わるはずです。

HTML

<div id="menu" >  
    <a href="#" id="home"><img  src="images/about.png" alt="logo" /></a>
</div>

CSS

#menu {
        margin-left    : 353px;
        margin-top     : -70px;
        padding-bottom : 16px;
}

#home {
        background     : transparent url(images/about.png);
        z-index        : 1;
}

#home:hover {
        background     : url(images/aboutR.png);
        z-index        : 2;
}

私が直面している問題は、メニュー項目にカーソルを合わせると、ホバーに表示される画像が古い画像の後ろに表示されることです。さらに、表示されるホバー背景画像の幅と高さは非常に小さくなっています。手伝ってください。ありがとう

4

10 に答える 10

26

前述のとおり、JS ソリューションは必要ありません。

それを行う別の方法は、両方の画像をロードし、:hoverイベントでそれらを非表示/表示することです。このようなもの：

HTML:

<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>

CSS:


.image_off, #home:hover .image_on{
   表示:なし
}
.image_on, #home:hover .image_off{
   表示ブロック
}
于 2012-06-04T20:47:33.587 に答える
4

このコードを body 終了タグの直前に配置し、

<script  type='text/javascript'>
$(document).ready(function(){
    $(".home").hover(
        function() {$(this).attr("src","images/aboutR.png");},
        function() {$(this).attr("src","images/about.png");
    });
});
</script>

class home をimgタグに配置します。終わり。完璧に動作します。

于 2012-06-04T19:48:19.813 に答える
3

これは機能します：

<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
    width: 400px;
    height: 142px;
    margin-left: 353px;
    margin-top: -70px;
    padding-bottom: 16px;
}

#menu:hover {
    background: url(lPr4mOr.png);
    background-repeat: no-repeat;
}
</style>
</head>
<body>
    <div id="menu">
        <a href="#" id="home"><img src="lPr4m.png" alt="logo" /></a>
    </div>
</body>
</html>

（ページ作成の便宜上、画像の名前を変更しました。）

于 2012-06-04T19:38:36.317 に答える
2

positionルールを使用しながらルールを使用する必要がありますz-index。position:relative使用した場所を追加してみてくださいz-index。

于 2012-06-04T20:18:12.773 に答える
2

imgタグを削除し、#home(およびその他のメニュー項目) の幅と高さを画像の幅と高さに設定します。

また、alt(アクセシビリティの目的で) 画像の内容に合わせてコンテンツを設定し、text-indentページ外に移動するようにプロパティを設定します。

現在、ホバーすると背景画像が変更されますが、imgタグは常に上にあります。

HTML

<div id="menu" >  
  <a href="#" id="home">Home</a>
</div>

CSS

#menu{
  margin-left: 353px;
  margin-top: -70px;
  padding-bottom: 16px;
}
#home{
  background:transparent url(images/about.png);
  width: 400px;
  height: 142px;
  z-index:1;
  text-indent: -9999em;
}
#home:hover{
  background:url(images/aboutR.png);
  z-index:2;
}
于 2012-06-04T19:12:48.373 に答える
2

a:hover img{display:none} を実行すると、img が削除されます。サイズを指定しなかったサイズの問題 bc についての idk です。もし私があなただったら、img 要素を捨てて、それを要素の背景画像として使用し、:hover で変更します。または img 要素が必要な場合は、上記と同じ原則に従って clip プロパティを使用します

于 2012-06-04T19:13:16.440 に答える
1

シンプルな画像のロールオーバーを作成しようとしているだけですか? 実際の例を見ないと、あなたが何をしようとしているのか正確にはわかりませんが、画像のロールオーバーは CSS スプライトを使用して簡単に行うことができ、jquery は必要なく、これにより防弾 Web サイトが大幅に強化されます。また、デフォルトの画像とオーバー状態の画像が同じ画像であり、プリロード コードが必要ないため、Web サイトの応答が速くなります。

（完全なスワップアウトではなく）マップされた画像が必要な場合は、背景画像、コンテナ div、および png-24 グラフィックス（png-24 を IE6 で動作させるには JavaScript が必要ですが、IE6 のサポートを気にする必要はありません）で実現できます。とりあえず？）。

JavaScript に頼らずにナビ画像を変更する良い方法は、以下のように background-position プロパティを使用することです。

    // define your container element
    #nav-home {  
         margin: 20px 5px;  
         height: 15px; 
         width: 40px;
          }

    // use a descendant selector to style the <a> tag
    #nav-home a { 
         background-image: url("/images/buttons-nav.gif"); 
         display: block; // THIS IS VERY IMPORTANT!!
         background-position: 0 0;  // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
         height: 15px; 
         }

    // this is where you change the position of the background for the hover state
    #nav-home a:hover { 
         background-position: -20px 0; //this moved it 20px to the right 
         }

html コードは次のようになります。

    <div id="nav-home"><a href="/yourlink/"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;"></a>
    <!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->

画像には、実際には次のようにオンとオフの両方の状態が含まれます。( http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_navのコード例)。基本的に、コンテナ div を使用してウィンドウを作成し、実際の背景画像の一部のみを表示しています。

また、すべてのブラウザーがブロック レベル要素での :hover の使用をサポートしているわけではないため、タグ以外で :hover を使用しないでください。

于 2012-06-04T21:22:08.647 に答える