0

Webサイトを作成していて、Photoshopで作成したわずかに異なる色のスーツを使用して別の画像/ボタンをロードすることにより、ボタンにホバー効果を追加したいと考えています。

コードを適用しても何も起こりません。

これが私のコードです：

CSS：

#main{
    position: relative;
    background-color:#ececec;
    height:900px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;

}


    #main .button2{

        position: absolute;
        left:0.5%;
        top: 71.5%;
        z-index:20;
        width:170px;
        height:40px;
    }
    #main .button2:hover{
        background-image : url(images/buttBootsRollover.png);  

    }

HTML：

<div id="main">
<article>


<section>
    <a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
    <a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
    <a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
</section>

</article>

これがより良い概観を与えるかもしれない写真です： ここに画像の説明を入力してください

最終的には、9つのボタンすべてに同じホバー効果を追加したいと思います

4

4 に答える 4

0

これはあなたが探しているものです。しかし、あなたは少なくともグーグルで試したことがないと確信しています。最初に簡単なCSSチュートリアルに従うことをお勧めします。 

#main{
    background-color:#ececec;
    height:500px;
    width: 600px;
    margin:0px auto;
}
.button{               
        z-index:1000;
        width:170px;
        height:40px;        
        display:block;
        background-repeat:no-repeat;
}  
#but_one{
    background-image : url(images/but_one.png);
} 
#but_two{
    background-image : url(images/but_two.png);
} 
#but_three{
    background-image : url(images/but_three.png);
} 
#but_one:hover{
    background-image : url(images/but_one_h.png);
} 
#but_two:hover{
    background-image : url(images/but_two_h.png);
} 
#but_three:hover{
    background-image : url(images/but_three_h.png);
} 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="main.css" />
        <title>hi css</title>
    </head>
    <body>
    <div id="main">
    <a href="index.php" ><img id="but_one" class="button" /></a>
    <a href="index.php" ><img id="but_two" class="button" /></a>
    <a href="index.php" ><img id="but_three" class="button" /></a>
    <div>
    </body>
 </html>
于 2013-03-07T01:49:04.237 に答える
0

多分あなたが望むものを達成するためにあなたの助けが必要ですjquery

<div class="box">
    <a href="#index.php" > <img src="images/buttGloves.png" class="button" /></a>
    <div class="overlay">play me!</div>
</div>

<div class="box">
    <a href="#index.php" > <img src="images/buttBoots.png" class="button2" /></a>
<div class="overlay">play me!</div>
</div>

<div class="box">
    <a href="#index.php" > <img src="images/buttEqu.png" class="button3" /></a>
<div class="overlay">play me!</div>
</div>

jquery

$(function(){
    $(".box").hover(function(){
      $(this).find(".overlay").fadeIn();
    }
                    ,function(){
                        $(this).find(".overlay").fadeOut();
                    }
                   );        
});

ワーキングデモ

于 2013-03-07T02:13:27.637 に答える
0

背景画像を 1 つだけ用意し、その一部を非表示にします。

例-ここで示されているように2倍にしますhttp://jsfiddle.net/edheal/Qb7YG

ここにコードがあります

CSS:

#wibble
{
    background-image: url(http://well-spun.co.uk/portfolio/technologies/images/rollover.png);
    background-position: left top;
    background-repeat: no-repeat;
    height: 14px;
    width: 200px;
}

#wibble:hover
{
    background-position: left -14px;
}

HTML:

<div id="wibble">
</div>

画像の高さは 28 ピクセルです。ホバリングしているかどうかに応じて、上半分または下半分のみを表示します。

于 2013-03-07T02:32:39.227 に答える
0

あなたがこれをしている方法は少しずれています。（おそらく）要素のスペース全体を占める画像を含む要素に background-image プロパティを設定しています。それを処理しようとすると頭痛がすることになるので、なぜ結果が得られたのかを説明するのではなく、そのようにしないで解決策を提供するだけです。

Get rid of the img elements inside your div elements. Change the background-image property of your button2 class to the image that you want as the default. Leave your .button2:hover property as is.

于 2013-03-07T01:37:40.437 に答える