2

スプライトを使用してホバーすると画像が変化するようにします。

これは私の現在のCSSです：

.main_advert {
    width:754px;
    margin:20px auto 0px auto;
    padding:20px 0px 20px 0px;
}
.main_advert img, .advert img {
    -webkit-box-shadow: 0px 0px 0px 5px #333;
    box-shadow: 0px 0px 0px 5px #333;
    border-radius:5px;
    border:1px solid #028EC9;
}

現在の HTML:

  <div class="main_advert">
      <a href="http://website.com" target="_blank"><img alt="Website" src="./images/website.jpg" border="0" /></a>

現在のCSSと互換性がないことを除いて、次のことが私が望むことを行うことを学びました。

互換性のない CSS:

.main_advert {
    background: url(./images/website.png) no-repeat 0 0;
    width: 728px;
    height: 90px;
    display: block;
    text-indent: -9999px;
}
.main_advert:hover {
    background-position: 0 -90px;
}

では、上記の CSS を現在の CSS に適応させるにはどうすればよいでしょうか?

4

2 に答える 2

0

そのツールを使用して、スプライトと css を生成します

于 2012-12-08T12:15:42.677 に答える
0

これが私の見解です。

コメントのソースを表示します。

(完全を期すために、ここにjsbinコードを掲載します。)

HTML を変更できないという前提に基づいて、いくつかの解決策を次に示します。

例 1

スプライトを使用していません。

CSS:

.main_advert_1 {
    width: 64px; /* Width of logo. */
    height: 64px; /* Height of logo. */
    background: url(http://drfatmaclinic.com/wp-content/uploads/2012/05/before-after_juvederm1-64x64.jpg) no-repeat;
}
    .main_advert_1 a {
        /* Now the <a> fills the parent container: */
        width: 100%;
        height: 100%;
        display: block; /* Required for <a> to expand to fill parent. */
    }
        .main_advert_1 img { display: block; }
            .main_advert_1 a:hover img { display: none; } /* Hide on hover. */

HTML:

<div class="main_advert_1">
    <a href="#" target="_blank">
        <img alt="Website" src="http://drfatmaclinic.com/wp-content/uploads/2012/06/before_after_restylane1-64x64.jpg">
    </a>
</div> <!-- /.main_advert_1 -->

例 2:

スプライトの使用。

CSS:

.main_advert_2 {
    /* Width and height of logo/ad/whatever. */
    width: 284px;
    height: 284px;
}
    .main_advert_2 img { display: none; } /* Just hide it so you can do stuff with the <a> only. */
    .main_advert_2 a {
        /* Random sprite found on web: */
        background-image: url(https://dw1.s81c.com/developerworks/mydeveloperworks/blogs/waldensponderings/resource/BLOGS_UPLOADED_IMAGES/sel-tux_wizard.png);
        background-repeat: no-repeat;
        /* IBID: */
        width: 100%;
        height: 100%;
        display: block; /* IBID */
    }
        .main_advert_2 a:hover { background-position: 0 -284px; } /* Position sprite on :hover. */

HTML:

<div class="main_advert_2">
    <a href="#" target="_blank">
        <img alt="Website" src="http://drfatmaclinic.com/wp-content/uploads/2012/06/before_after_restylane1-64x64.jpg">
    </a>
</div> <!-- /.main_advert_2 -->

HTML を編集できる場合は、を削除する<img>と、コードが少し「きれい」になります。

それは何かの助けになりますか？

編集＃1

皆様のご意見をもとに新装版です。

CSS:

.main_advert {
    /* Width and height of logo/ad/whatever. */
    width: 728px;
    height: 90px;
}
    .main_advert img { display: none; } /* Just hide it so you can do stuff with the <a> only. */
    .main_advert a {
        /* Random sprite found on web: */
        background-image: url(http://trickerygaming.net/tsf2/images/registeroof.png);
        background-repeat: no-repeat;
        /* IBID: */
        width: 100%;
        height: 100%;
        display: block; /* IBID */
    }
        .main_advert a:hover { background-position: 0 -90px; } /* Position sprite on :hover. */

HTML:

<div class="main_advert">

    <a target="_blank" href="#"><img border="0" src="./images/register.jpg" alt="Register"></a>

</div>

より良い？

編集＃2

これは、 を削除し<img>てテキストに置き換えたバージョンです。

( HTML/CSS はこちらをご覧ください。)

CSS:

.main_advert {
    text-indent: -999em; /* This hides the "Register on our forums." text (see below). */
    /* Width and height of logo/ad/whatever: */
    width: 728px;
    height: 90px;
    margin: 0 auto; /* Centers this container inside parent. */
    overflow: hidden; /* Hides indented text from above. */ 
}
    .main_advert a {
        /* Your image: */
        background-image: url(http://trickerygaming.net/tsf2/images/registeroof.png);
        background-repeat: no-repeat;
        /* IBID: */
        width: 100%;
        height: 100%;
        display: block; /* Allows <a> to fill parent. */
    }
        .main_advert a:hover { background-position: 0 -90px; } /* Position sprite on :hover. */
        .main_advert a:active,
        .main_advert a:focus { outline: none; } /* Removes ugly outline, on click, in some browsers. */

HTML:

<div class="main_advert">

    <a target="_blank" href="#">Register on our forums.</a>

</div> <!-- /.main_advert -->

「スプライト」テクニックについては、このアプローチが一番気に入っています。

実際、私だったら、CSS3 でやってみようと思います。

アイデアやインスピレーションを与える CSS3 ツールについては、以下をご覧ください。

于 2012-12-08T12:47:53.810 に答える