Jump to content

общий ховер картинки и текста

Featured Replies

Posted

допустим, есть код кнопки "выход" на форуме и перед ним вставлена картинка 

<li><a href="{parse url="app=core&amp;module=global&amp;section=login&amp;do=logout&amp;k={$this->member->form_hash}" base="public"}" title='{$this->lang->words['log_out']}'><img src="{$this->settings['img_url']}/icons/s-out.png" class='iconexit' alt='' />&nbsp;{$this->lang->words['log_out']}</a></li>
 

 

класс iconexit прописан следующим образом 

 

.iconexit {
margin-left: 0px;
margin-top: -1px;
opacity: 0.8;
}

.iconexit:hover {
opacity: 1.0;
}
для текста кнопки "выход" применяются следющие параметры

 

#user_navigation a { color: #ACB5C3; }
#user_navigation a:hover { color: #E8ECF3; }

при наведении на иконку срабатывает ховер и для иконки и для текста

но при наведении на текст срабатывает ховер только для текста

собственно, как сделать чтобы ховер срабатывал в обоих случаях одинаково?

я не специалист html & css и возможно не правильно всё делаю...

  • Author

подниму тему. ссылка на форум есть в профиле, если нужно для входа - test111 111222333

достаточно понаводить курсор на иконку выхода и на текст "выход" или же на имя пользователя и на его картинку в самом верху на главной

  • Author


Переместите из кода изображения Ваш новый класс в код ссылки.

к примеру у картинки выставлена тень при наведении курсора (hover), у текста тоже вылезет тень вокруг,

или же ховер текста реализован изменением цвета, а ховер картинки - c помощью opacity

 

разве не перепутается всё?

  • 1 месяц спустя...

Попробуйте эффект hover для картинки реализовать в css немного иначе:

#user_navigation a:hover .icontext {opacity:1.0;}

Поскольку картинка лежит внутри тэга ссылки, должно сработать.

  • Author

Попробуйте эффект hover для картинки реализовать в css немного иначе:



#user_navigation a:hover .icontext {opacity:1.0;}

Поскольку картинка лежит внутри тэга ссылки, должно сработать.

 

не получилось  :(

не получилось  :(

 

Подозрительно. Перепроверил у себя - срабатывает. Дико извиняюсь, я в коде в названии класса картинки ошибся, начирикал .icontext вместо .iconexit, может заковыка в этом?

  • Author


Подозрительно. Перепроверил у себя - срабатывает. Дико извиняюсь, я в коде в названии класса картинки ошибся, начирикал .icontext вместо .iconexit, может заковыка в этом?

да... у самого голова перед праздниками не соображает(

 

всё отлично, спасибо большое!

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.