Спрайт не работает (фон не корректируется, а ссылка не существует?)

Это так расстраивает, потому что когда-то это работало, а сейчас нет. У меня есть кнопки социальных сетей внизу сайта, которым я пользуюсь. Я использую фоновое изображение, поэтому, когда пользователь наводит курсор на кнопку, оно меняется с черно-белого изображения на цветную версию. Это работало раньше, и я не помню, чтобы что-то менять, но теперь это не работает, и это действительно расстраивает.

Вот мой 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 классы, потому что они будут применяться к кнопкам социальных сетей, хотя я считаю, что они не имеют никакого эффекта. Но на всякий случай я что-то пропустил...

ТАКЖЕ!!! не только фон не меняется при наведении, но там даже нет ссылки.

Источник

3 ответа

Решение
  1. не используйте display:block/inline/inline-block
  2. объединить фон и положение в одну строку, лучше
  3. используйте поле, а не отступы.
  4. добавить полный URL в изображения при наведении
  5. добавить высоту и ширину в изображения при наведении
  6. добавить изображение в div, а не
  7. используйте отрицательные числа, а не положительные числа.
  8. убедитесь, что изображение на http://yoursite.com/images/snicons2.jpg - если нет, то обновите 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)

Источник

Я не думаю, что установка фонового изображения при наведении помогает.

Является ли изображение доступным в первую очередь. Можете ли вы проверить это, перейдя по ссылке на изображение.

Если URL вашей страницы http://your.domain/abc/def.html тогда изображение должно быть на http://your.domain/abc/images/snicons2.jpg

Источник

Я изменил ваш код, потому что у меня, как и у остальных 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 имел только фоновое позиционирование. Если только это не то, ради чего ты собирался. В таком случае, игнорируй меня.

Источник
Другие вопросы по тегам