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;
}

.footwrapクラスとクラスを追加したのは、.footerそれらがソーシャル ネットワーキング ボタンに適用されるためでしたが、効果はないと思います。しかし、念のため、何かを見逃した...

また！！！ホバーしても背景が変わらないだけでなく、そこにリンクすらないようです。

Answer 1

1. display:block/inline/inline-block を使用しないでください
   
2. 背景と位置を1行にまとめたほうがいい
   
3. パディングではなく、マージンを使用します。
4. ホバー画像に完全な URL を追加する
   
5. ホバー画像に高さと幅を追加します
   
6. aではなく、divに画像を追加します
7. 正の数ではなく、負の数を使用してください。
8. 画像が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 で完全に複製された Web サイト: http://jsbin.com/OTeMuX/1 )

Answer 2

ホバー時に背景画像を設定しても役に立たないと思います。

そもそも画像にアクセスできますか。画像の URL にアクセスして確認できますか。

ページの URL がhttp://your.domain/abc/def.html の場合、画像は http://your.domain/abc/images/snicons2.jpg にある必要があります。

Answer 3

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 にはバックグラウンドの配置しかありませんでした。それがあなたが目指していたものでない限り。その場合、私を無視してください。