html - 精灵不工作（背景不调整和链接不存在？）

Question

这太令人沮丧了，因为在某一时刻它可以工作，而现在却不行。我正在使用的网站底部有社交网络按钮。我正在使用背景图像，因此当用户将鼠标悬停在按钮上时，它会从黑白图像变为彩色版本。这以前有效，我不记得有任何更改，但现在它不起作用，这真的很令人沮丧。

这是我的 HTML

<!-- SOCIAL NETWORKING -->
<div class="sn">
    <div class="fb">
        <a href="http://www.facebook.com/obliquedrive"></a>
    </div>
    <div class="tw">
        <a href="http://www.twitter.com/obliquedrive"></a>
    </div>
    <div class="in">
        <a href="http://www.linkedin.com"></a>
    </div>
</div>

还有我的 CSS

.footwrap {
    width: 100%;
    height: 100px;
    background-color: #444;
}
.footer {
    display: block;
    width: 1100px;
    margin: auto;
    height: 100px;
    background-color: #444;
    position: relative;
    bottom: 0px;
}
.comm {
    width: 1050px;
    margin: auto;
    height: 100px;
    font-size: 10px;
    margin-top: 20px;
    text-align: center;
}
.sn {
    width: 120px;
    float: right;
    margin-top: 40px;
    margin-right: 0px;
    display: inline-block;
}
.fb {
    width: 20px;
    height: 20px;
    display: inline-block;
}
.fb a {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(images/snicons2.jpg);
    background-position: 0px 0px;
}
.fb a:hover {
    background-position: 0px 20px;
}

.tw {
    width: 20px;
    height: 20px;
    display: inline-block;
    padding-left: 10px;
}
.tw a {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(images/snicons2.jpg);
    background-position: 40px 0px;
}
.tw a:hover {
    background-position: 40px 20px;
}
.in {
    width: 20px;
    height: 20px;
    display: inline-block;
    padding-left: 10px;
}
.in a {
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(images/snicons2.jpg);
    background-position: 20px 0px;
}
.in a:hover {
    background-position: 20px 20px;
}

我添加了.footwrapand.footer类，因为它们将应用于社交网络按钮，尽管我相信它们没有效果。但以防万一我错过了什么......

还！！！背景不仅在悬停时不会改变，而且就像那里甚至没有链接一样。

score 1 · Accepted Answer

不要使用 display:block/inline/inline-block
将背景和位置合并为一行，这样更好
使用边距，而不是填充。
将完整网址添加到悬停图像中
在悬停图像中添加高度和宽度
将图像添加到 div，而不是 a
使用负数，而不是正数。
确保图片位于http://yoursite.com/images/snicons2.jpg - 如果没有，则相应地更新 URL。

~~我无法测试它是否有效，因为您需要将完整的 URL 发布到精灵。但这是我建议的解决方案：~~

感谢您提供图片的完整 URL。这是解决方案：

.footwrap {
    width: 100%;
    height: 100px;
    background-color: #444;
}
.footer {
    display: block;
    width: 1100px;
    margin: auto;
    height: 100px;
    background-color: #444;
    position: relative;
    bottom: 0px;
}
.comm {
    width: 1050px;
    margin: auto;
    height: 100px;
    font-size: 10px;
    margin-top: 20px;
    text-align: center;
}
.sn {
    width: 120px;
    float: right;
    margin-top: 40px;
    margin-right: 0px;
}
.fb {
    margin-left: 10px;
    float: left;
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snIcons2.jpg) 0px 0px no-repeat;
}
.fb:hover {
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) 0px -20px no-repeat;
}

.tw {
    margin-left: 10px;
    float: left;
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px 0px no-repeat;
}
.tw:hover {
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px -20px no-repeat;
}
.in {
    margin-left: 10px;
    float: left;
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px 0px no-repeat;
}
.in:hover {
    width: 20px;
    height: 20px;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px -20px no-repeat;
}

在jsbin中：

垂直显示：http: //jsbin.com/EburEdu/1/

水平显示：http: //jsbin.com/UviHozE/1/

为您 - 为您的站点替换 STYLE.CSS ：（
因为您说它不起作用，我更新了您的整个 style.css 样式表。上面的代码完美运行，我只需要为您的特定站点进行一些其他更改，这些更改不会影响其他人寻找解决方案）：

html {
    height: 100%;
    border: none;
}
body {
    margin: 0;
    padding: 0;
    min-width: 1100px;
    height: 100%;
    overflow: scroll;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FAFAFA), color-stop(1, #DDDDDD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FAFAFA 0%, #DDDDDD 100%);
    background-attachment: fixed;

}
h1 {
    color: #ED1C24;
    font-weight: 700;
    font-size: 38px;
    line-height: 110%;
    letter-spacing: -0.02em;
    margin-top: 60px;
}
h2 {
    color: #222222;
    font-weight: 400;
    font-size: 16px;
    line-height: 70%;
    margin-top: -12px;
}
.color {
    color: #ED1C24;
}
.subtext a {
    text-decoration: none;
    color: #FFFFFF;
}



/*Header*/
#mobilenav {
    display: none;
}
.header {
    width: 100%;
    height: 75px;
    position: fixed;
    display: block;
    top: 0px;
    z-index: 1000;
    background-color: #Fff;
    -webkit-box-shadow: 0px 1px 5px 0px #9a9a9a;
    -moz-box-shadow: 0px 1px 5px 0px #9a9a9a;
    box-shadow: 0px 1px 5px 0px #9a9a9a;
}
.headwrap {
    width: 1050px;
    margin: auto;
    margin-top: 13px;
    min-width: 1100px;
}
.nav {
    width: 750px;
    float: right;
    color: #000;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    margin-top: 8px;
    margin-right: 20px;
    display: inline-block;
}
.nav ul {
    list-style: none;
    float: right;
}
.nav li {
    float: left;
    padding-left: 20px;

}
.nav li a {
    color: #000;
    padding-left: 40px;
    text-decoration: none;
}
.nav li a:hover {
    text-decoration: underline;
}
.nav li a:visited { 
}



/*Content*/
.pagewrap {
    display: block;
    width: 1100px;
    margin: auto;
    margin-top: 0px;
    position: relative;
    padding-bottom: 50px;
}
.content p {
    color: #222222;
    line-height: 140%;
    font-weight: 300;
    font-size: 24px;
    margin-top: -18px;
    font-family: 'Roboto', sans-serif;
}
.intro {
    text-align: left;
    width: 1050px;
    margin: auto;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
}
.intro h1 {
    font-size: 32px;
}
.intro p {
    font-size: 20px;
}
.slider-wrapper {
    padding-top: 150px;
}
section {
    width: 650px;
    margin-left: 50px;
}
.one {
    margin-top: 150px;
}
section h1 {
    padding-top: 75px;
    font-size: 45px;
    font-weight: 300;
}
hr {
    width: 300px;
    height: 1px;
    background-color: #000;
    border: none;
}
.one p, .two p {
    font-size: 12px;
    text-align: left;
    vertical-align: top;
}
.two {
    margin-top: -60px;
}
article {
    padding-top: 15px;
    font-size: 12px;
    font-weight: 400;
    margin: 30px;
    width: 604px;
    font-family: helvetica, sans-serif;
}
.panel {
    width: 300px;
    margin-top: 50px;
    margin-left: 33px;
    float: left;
    height: 150px;
    background-color: #fafafa;
    border-bottom-width: 35px;
    border-bottom-style: solid;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
    color: #000;
    font-weight: normal;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 150%;
    letter-spacing: normal;
}
.panel h1 {
    font-size: 14px;
    color: #DD282E;
    font-weight: bold;
    padding-top: 0px;
    margin-top: 0px;
    line-height: 150%;
    height: 21px;
}
.panel .text {
    padding: 10px;
    height: 104px;

}
.panel-wrapper {
    height: 150px;
    width: 966px;
    margin: auto;
    font-size: 1em;
}
.panel .subtext {
    margin-top: 35px;
    text-align: right;
    padding-right: 10px;
    color: #ffffff;
    vertical-align: center;
    font-size: 1em;
}
.button, .button2 {
    float: right;
}
#controls {
    float: right;
    margin-top: -60px;
}
#slider {
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
article h1 {
    font-size: 26px;
    color: #DD282E;
    font-weight: bold;
    padding-top: 0px;
    margin-top: 0px;
    line-height: 150%;
}




/*Sidebar*/
#sidebar {
    width: 220px;
    float: right;
    margin-right: 88px;
    margin-top: 150px;
    color: #222222;
    line-height: 140%;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}
#sidenav {
    height: 100px;
    width: 200px;
    background-color: #FFFFFF;
    padding: 10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#sidenav li {
    list-style: inside;
}
#links {
    width: 200px;
    margin-top: 30px;
    background-color: #FFFFFF;
    padding: 10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#documents {
    width: 200px;
    margin-top: 30px;
    background-color: #FFFFFF;
    padding: 10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#news {
    width: 330px;
    background-color: #FFFFFF;
    padding: 10px;
    margin: auto;
    margin-top: 0px;
}
#news p {
    margin-top: 0px;
}
#sidebar ul {
    list-style: none;
    margin-left: -25px;
}
#sidebar li {
    font-size: 12px;
    font-weight: 400;
    text-align: left;
}
#sidebar a, #sidebar a:visited {
    text-decoration: none;
    color: #39F;
}
#sidebar a:hover, #sidbar a:active {
    text-decoration: underline;
    color: #36F;
}





/*Footer*/
.footwrap {
    width: 100% !important;
    height: 100px !important;
    background-color: #444 !important;
}
.footer {
    display: block !important;
    width: 1100px !important;
    margin: 30px auto !important;
    height: 100px !important;
    background-color: #444 !important;
    position: relative !important;
    bottom: 0px !important;
    font: 14px arial !important;
    color:  #fff !important;
    padding: 20px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.comm {
    width: 1050px !important;
    margin: auto !important;
    height: 100px !important;
    font-size: 10px !important;
    margin-top: 20px !important;
    text-align: center !important;
}
.sn {
    width: 120px !important;
    float: right !important;
    margin-top: -100px !important;
    margin-right: 0px !important;
}
.fb {
    margin-left: 10px !important;
    float: left !important;
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snIcons2.jpg) 0px 0px no-repeat !important;
}
.fb:hover {
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) 0px -20px no-repeat !important;
}

.tw {
    margin-left: 10px !important;
    float: left !important;
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px 0px no-repeat !important;
}
.tw:hover {
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px -20px no-repeat !important;
}
.in {
    margin-left: 10px !important;
    float: left !important;
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px 0px no-repeat !important;
}
.in:hover {
    width: 20px !important;
    height: 20px !important;
    background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px -20px no-repeat !important;
}

（您的网站在 jsbin 中完全克隆，并带有完整的工作精灵：http: //jsbin.com/OTeMuX/1）

score 0 · Accepted Answer

我不认为在悬停时设置背景图像有帮助。

图像是否首先可访问。您可以通过图像 URL 来检查。

如果您的页面 URL 是http://your.domain/abc/def.html 那么图像应该在http://your.domain/abc/images/snicons2.jpg

score 0 · Accepted Answer

我修改了您的代码，因为我和其他 SO 一样，没有可以使用的图像。但这很好用。CSS

.footwrap {
width: 100%;
height: 100px;
background-color: #444;
}
.footer {
display: block;
width: 1100px;
margin: auto;
height: 100px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 1050px;
margin: auto;
height: 100px;
font-size: 10px;
margin-top: 20px;
text-align: center;
}
.sn {
width: 120px;
float: right;
margin-top: 40px;
margin-right: 0px;
display: inline-block;
}
.fb {
width: 20px;
height: 20px;
display: inline-block;
}
.fb a {
display: block;
width: 20px;
height: 20px;
background-image: url(fbo.jpg);
background-position: 0px 0px;
}
.fb a:hover {
background-position: 0px 20px;
background-image: url(fbi.jpg);\\haha, fbi...
}

.tw {
width: 20px;
height: 20px;
display: inline-block;
padding-left: 10px;
}
.tw a {
display: block;
width: 20px;
height: 20px;
background-image: url(two.jpg);
background-position: 40px 0px;
}
.tw a:hover {
background-position: 40px 20px;
background-image: url(twi.jpg);
}
.in {
width: 20px;
height: 20px;
display: inline-block;
padding-left: 10px;
}
.in a {
display: block;
width: 20px;
height: 20px;
background-image: url(ino.jpg);
background-position: 20px 0px;
}
.in a:hover {
background-position: 20px 20px;
background-image: url(ini.jpg);
}

HTML

<body>
<div class="sn">
    <div class="fb">
        <a href="http://www.facebook.com/obliquedrive"></a>
    </div>
    <div class="tw">
        <a href="http://www.twitter.com/obliquedrive"></a>
    </div>
    <div class="in">
        <a href="http://www.linkedin.com"></a>
    </div>
</div>
</body>

编辑我没有解释为什么......你应该表现得好像锚是你正在修改的东西，并且 div 只是这些锚的容器。你的 a:hover 只是背景定位。除非那是你想要的。那样的话，别理我。

html - 精灵不工作（背景不调整和链接不存在？）

3 回答 3

Related

Reference