Списки стилей CSS, содержащие ссылки - PullRequest
Новая
       17

Списки стилей CSS, содержащие ссылки

0 голосов
/ 28 февраля 2012

Утренние парни,

У меня проблема с CSS, которая заставляет меня взбираться на стену. У меня есть неупорядоченный список с пользовательскими изображениями маркеров: 

.mainTable ul {
    list-style-position: inside;
    list-style-image: url(../img/bullet_white.png);
    line-height: 18px;
    color: #335;
}

Теперь некоторые из этих элементов списка содержат ссылки, а некоторые нет. Для тех, кто это делает, я бы хотел, чтобы пуля менялась при опрокидывании. Не слишком сложно, как вы думаете ... Вот как я это отметил: 

.mainTable ul li a:link {
    padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
    list-style-image: url(../img/bullet_red.png);
    padding-left:2px; // padding changes (moves link text), but bullet's still white
}

Теперь я подозревал (при изменении заполнения), что стиль применяется к внутренней ссылке, а не к контейнеру "li". Я пробовал тестировать: 

.mainTable ul li:hover

и изображение меняется, но оно меняется для всех тегов "li" в области видимости (потому что это то, что я сказал, чтобы делать), но это не то, чего я добиваюсь. Должен быть простой способ сделать это, не прибегая к js, но я буду ошибаться, если смогу разобраться.

Есть предложения? Вся помощь (даже если это просто «Вам нужно использовать JS, вы самородок») с благодарностью благодарны:)

Danny

ПОЛУЧИЛ ЭТО СКОРО (пока не могу ответить на свой вопрос - по какой-то причине ...)

Спасибо за ребята. Ответ - смесь вышеупомянутых предложений. Перенос пуль с тегов li и на якоря сработал, но элементы списка без ссылки не получили пули ... DOH!

Затем я установил другой класс "notALink" и прикрепил к нему мой стиль списка по умолчанию. Вот разметка, если кому-то интересно ... 

.mainTable ul { /* kill formatting on the ul */
    list-style-position: inside;
    line-height: 18px;
    color: #335;
    list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
    list-style-image: url(../img/bullet_white.png);
    list-style-position: inside;
    display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
    list-style-image: url(../img/bullet_white.png);
    list-style-position: inside;
    display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
    list-style-image: url(../img/bullet_red.png);
}

Работает отлично - ура выглядывает, ты вырыл меня из маленькой ямы, которую я копал сам

Danny

Ответы [ 3 ]

1 голос
/ 28 февраля 2012

Нет, в чистом CSS невозможно изменить родительский элемент при наведении на ребенка (2 или 3). Смотрите: Есть ли родительский селектор CSS?

Итак, у вас есть два варианта:

Использовать JavaScript

или

Оставьте стиль списка пустым и добавьте маркеры для потомков (a или что-то еще). Таким образом, вы измените стиль a, а не li. Это то, что я бы сделал;]

или (из И Цзян комментарий)

Добавить дополнительный класс к li элементам, содержащим a

0 голосов
/ 28 февраля 2012

То, что вы можете сделать, это набрать a как display: block и переместить его влево (используя отрицательное поле), чтобы закрыть маркер li: s.Проверьте эту скрипку:

http://jsfiddle.net/TG5Lj/

Вам также может понадобиться установить background-color на a, если ваш a: s background-image не полностью покрываетli: с.

0 голосов
/ 28 февраля 2012

Попробуйте применить стиль к 

.mainTable ul li:hover li

или что-то в этом роде.Это должно переопределить правило для родителей.

РЕДАКТИРОВАТЬ : Извините, я не полностью понял ваш вопрос.Мне кажется, что это невозможно сделать с помощью css, так как вам нужно применить стилизацию к «li, у которого нет« a »потомков», что, я думаю, не может быть выражено в селекторах css.В качестве обходного пути, чтобы не использовать сценарии, я предлагаю вам изменить фон ссылки, а не изображение маркера.

...