Подчеркиваение ссылок, затухание ссылок и изображений

[смольник]

Доброго времени, мастера и гуру. Я решил пострадать перфекционизмом и устранить некоторые шероховатости, но, сам я в вопросах CSS ещё практически девственен, помогите.

что делать-то?

1. Ссылки в эпиграфе подчеркнуты, при наведении на них подчёркиваение убирается, это хорошо. Нужно, чтобы они вообще не были подчеркнуты;

вещдок-1

Задача: как убрать подчёркивание неактивных ссылок в эпиграфе?
_______________________________________________________________________
2. То же самое с никами: но, немного наоборот. При наведении на ник, он подсвечивается, что хорошо, и подчеркивается, что - плохо.

вещдок-2

Задача: как убрать подчёркивание активных ссылок ников?
Задача решена самостоятельно.
_______________________________________________________________________
3. Для эффекта затухания ссылок я использовал код, почерпнутый вот из этого обсуждения, весьма подошёл вот такой:
#page-t a { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
#page-t a:hover {color: #bbb; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -moz-opacity:.55 !important;opacity:.55 !important; filter:alpha(opacity=55);}

Задача: как и куда прописать такое в меню и чтоб без подчёркивания (активных или неактивных ссылок)?

вещдок-3

_______________________________________________________________________
4. Там же я пытался выяснить вопрос, как сделать следующее: чтобы изображения (пусть те, что ссылками, у меня все такие, потому что из радикала или яндекса) в неактивном состоянии были притухшими, при наведении на них курсора, становились активными и "прояснялись".
Сейчас это выглядит так в результате вписывания кода из п.3 (см.выше). Затухание плавное, что хорошо, но, не так как нужно, что - плохо. А нужно - наоборот.

вещдок-4

неактивное изображение

активное изображение

проверить в полевых условиях, если нужно

Были предложены варианты:
1. перенесите opacity из второй строки в первую и настройте как вам надо.
В результате, совсем затухшие изображения немного прояснялись, но не до своего нормального состояния. Не знаю, может, я там что недонастроил, повторюсь, не в курсе просто, что там и именно как нужно настроить (поменять какие-то значения или что-то ещё);

2. #page-t a,
.postContent .postInner img{
opacity : 0.5;
transition: all 2s;
-webkit-transition:all 2s;
}

#page-t a:hover,
.postContent .postInner img:hover {
opacity : 1;
color: #B0B0B0 !important;
}

если просто нужно чтобы так подсвечивались только картинки внутри ссылки (кликабельные), тогда так:

#page-t a,
.postContent .postInner a img{
opacity : 0.5;
transition: all 2s;
-webkit-transition:all 2s;
}

#page-t a:hover,
.postContent .postInner a img:hover {
opacity : 1;
color: #B0B0B0 !important;
}
В результате, то же самое, что и в п. 1. - затухшие изображения немного прояснялись, но не до своего нормального состояния, и затухание происходит резкой сменой одного тона на другой.

Задача: как сделать неактивные изображения потухшими, а ктивные - обычными и чтобы затухание было плавным?
Задача решена с помощью  Norra Flicka, кодом:
#page-t a,
.postContent .postInner img{
opacity : 0.5;
-moz-transition: all 2s; /* Firefox */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
transition: all 2s;
}

#page-t a:hover,
.postContent .postInner img:hover {
opacity : 1 !important;
}

@темы: текст, меню, эпиграф, diaryCSS, платный сервис, Дизайн

Comments

[Norra Flicka]

Задача 1, 3
.postInner a,
#epigraph a,
.menuSection a:hover{text-decoration:none !important;}

По 4му пункту ответ на старом месте.
Весьма полезно узнать кстати что у вас за браузер.
Удачи

[смольник]

Norra Flicka, ещё раз спасибо, волшебница) Но, хотелось бы узнеть ещё вот что: с изображениями работает отлично) Так что, как бы это отдельно для них и прописать (ибо уж очень бледными стали неактивные ссылки).

[Norra Flicka]

Уже ответила =)

[смольник]

Norra Flicka, я понял. Если что, давайте тут пообщаемся при случае. Но с изображениями происходит что-то странное, они проясняются на секунду и снова тухнут даже при оставлении на них курсора.
При этом коде
.postContent .postInner img{
opacity : 0.5;
-moz-transition: all 2s; /* Firefox */
-webkit-transition:all 2s; /* Safari and Chrome */
-o-transition: all 2s; /* Opera */
transition: all 2s;
}

.postContent .postInner img:hover {
opacity : 1 !important;
}

[Norra Flicka]

Ага, потому что вверху есть кусок кода который задаёт противоположную анимацию для ссылок. То есть что происходит когда вы наводите курсор на картинку когда она внутри ссылки:
срабатывает анимация для ссылок и меняется прозрачность с 1 до 0.5, а так же срабатывает анимация для картинок и меняется прозрачность с 0.5 до 1 - бардак.
Опять же сорри, ответила уже туда, до того как вы написали коммент.

[злой сов]

У вас экстратоп не отображается, хотя в коде я его вижу.

[смольник]

злой сов, я его вижу. Глюки, бывает

[смольник]

Norra Flicka,

потому что вверху есть кусок кода который задаёт противоположную анимацию для ссылок.

сейчас я вот это
#page-t a { -moz-transition: all 0.5s ease 0s;}
#page-t a:hover { -moz-transition: all 0.5s ease 0s; color: #BBBBBB; opacity: 0.55 !important; text-decoration: none;}

меняю на это
#page-t a,.postContent .postInner img{ opacity : 0.5; color: #999 !important; -moz-transition: all 2s; -webkit-transition:all 2s; -o-transition: all 2s; transition: all 2s;}
#page-t a:hover,.postContent .postInner img:hover { opacity : 1 !important;}

Поменял цвет активных ссылок, теперь всё хорошо)