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 回答