2010-10-09 9 views
-2

CSS файл: -Почему изображение не отображается на фоне div?

<style type="text/css"> 

.sprite div{ 
width: 728px; 
height: 243px; 
}  

.sprite 
    a:hover{ display: block; 
        width: 728px; 
        height: 243px; 
        background-image: url(images/image.jpg); 
        background-repeat: no-repeat; } 
    .sp_ID1 
    { 
     background-position: 0px 0px; 
    } 
    .sp_ID2 
    { 
     background-position: 0px -245px; 
    } 

    .sp_ID3 
    { 
     background-position: 0px -492px; 
    } 

    .sp_ID4 
    { 
     background-position: 0px -737px; 
    } 

    .sp_ID5 
    { 
     background-position: 0px -1000px; 
    } 

    .sp_ID6 
    { 
     background-position: 0px -200px; 
    } 
    </style 

HTML: -

<div class="sprite>" 
    <span class="sprite sp_ID1"><a href=#>Link1</a></span> <br /><br /> 

     <span class="sprite sp_ID2"><a href=#>Link2</a></span> <br /> <br /> 

     <span class="sprite sp_ID3"> <a href=#>Link3</a></span> <br /><br /> 

     <span class="sprite sp_ID4"> <a href=#>Link4</a></span> <br /><br /> 

     <span class="sprite sp_ID5"> <a href=#>Link5</a></span> <br /> 
</div> 

Часть изображений этого CSS спрайты появляется только как фон анкерных tags..I хотят части this CSS спрайт, чтобы появиться в виде рамки div. В основном попытка создания обратных изображений с помощью спрайтов.

То, что я хочу, это что-то вроде this ..... Серое цветное изображение появится в фоновом режиме, когда мышь зависает над «Link1», изображение зеленого цвета появляется, когда мышь зависает над «Link2» и так далее ... plz кто-то говорит мне, что я делаю неправильно? Он пытался заставить его работать со вчерашнего дня, но напрасно ... PLZ помочь ... Спасибо.

+3

Дубликат [Нужна помощь с CSS Sprites плз] (http://stackoverflow.com/questions/3896185/need- help-with-css-sprites-plz-closed) и [Проблема с внедрением CSS Sprite] (http://stackoverflow.com/questions/3895848/problem-implementing-css-sprite) - см. [Переписывает вопрос только способ получить ответы, если помощь срочно необходима, и нет никакой активности в оригинале?] (http://meta.stackexchange.com/questions/67083/is-reposting-a-question-the-only-way-to-get -answers-if-help-is-urgently-needed-an) для получения дополнительной информации. – Dori

+0

Позвольте мне посмотреть, правильно ли я прав. Вам нужен этот список ссылок и хотите, чтобы вся серая область меняла цвет фона (фоновое изображение), когда они зависали? – Claudiu

+0

Новая ссылка с момента [отключения питания] (http://meta.stackexchange.com/questions/67114/stack-overflow-outage) дала дубликаты нового идентификатора: [Нужна помощь с CSS Sprites plz] (http: // stackoverflow.com/questions/3896522/need-help-with-css-sprites-plz-closed). – Arjan

ответ

1

Счастливая душа, я пытался объяснить это вам в the other copy of this question но получил отвергнуто, когда вы не могли бы понять это:

.sprite a:hover имеет фоновое изображение.

.sp_ID1 (тот же элемент, что и .sprite) получает позиционирование изображения, но не имеет фонового изображения.

Неясно, что вы действительно хотите, но есть несколько проблем, я думаю, что вам нужно сделать шаг назад и попытаться понять, что вы делаете:

  1. Таргетинг различные элементы для фоновое изображение и позиционирование изображения.
  2. Элемент a не имеет размеров или положений, пока он не зависнет.
  3. Фоновый рисунок на элементе a отсутствует, пока он не зависнет.
  4. не Ваш добавленным .sprite div не предназначаться каких-либо элементов, нет div внутри вашего .sprite
+0

+1 для терпения, хотя я чувствую, что не следует отвечать на повторяющиеся вопросы, но просто голосуйте, чтобы закрыть их. – Arjan

1

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

Смежные вопросы