Регулировка размера фонового изображения спрайта в элементе списка - PullRequest
Новая
       2

Регулировка размера фонового изображения спрайта в элементе списка

1 голос
/ 08 ноября 2011

http://jsfiddle.net/jasondavis/Mt87G/1/

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

  • имеет фоновое изображение спрайта с текстом справа от него
  • имеют другое изображение при наведении на
  • показать изображение при наведении, если класс «активный» существует - см. Мой второй элемент списка для демонстрации
  • Если строка списка обернута в теги, тогда она свяжет текст и изображение вместе, так что вы наводите курсор на текст или изображение, и они оба изменяют фоновое изображение
    • каждая строка будет иметь верхнюю границу

Если вы посмотрите мою страницу jsfiddle выше, вы увидите, что у меня есть то, что я описываю, за исключением некоторых проблем

  • Мое фоновое изображение не позволяет мне устанавливать размеры или они не работают
  • мое фоновое изображение просвечивает, где текст растягивается на

Если я смогу решить эти 2 вопроса, думаю, я буду в хорошей форме.

----- Пару заметок о коде, есть много отступов, полей и т. Д., Которые равны 0, я оставил их там, как сейчас, для простого тестирования / изменения, пока код не будет готов. Также у меня есть одно и то же имя класса и фоновое изображение для всех элементов, которые превратятся в отдельные изображения, как только я выясню это с тем, с которым не должно быть проблем.

Пожалуйста, помогите мне, если можете, я в тупике, спасибо 

<ul id="post-meta-wrapper">
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="active meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>

</ul>

1035 * CSS * 

#post-meta-wrapper{
    list-style: none;
    margin:20px 0 20px 20px;
    width:400px;
}

#post-meta-wrapper li {
    width:100%;
    color: #44495B;
    border-top: 1px dotted #CCC;
    color: #999;
    font-size: 12px;
    line-height: 28px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-indent: 0px;
}

#post-meta-wrapper .meta-img {
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    width: 15px;
    height: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 18px;
}

#post-meta-wrapper .meta-img:hover,
#post-meta-wrapper .active{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
    width: 15px;
    height: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 18px;
}

1 Ответ

2 голосов
/ 08 ноября 2011

Вы можете сделать так: 

#post-meta-wrapper li a{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    padding-left:15px;
}

#post-meta-wrapper .meta-img {
    background:#fff;
    width: 15px;
    height: 10px;
    padding-left:8px;
}

Проверить скрипку http://jsfiddle.net/Mt87G/2/

...