Jump to content

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

Featured Replies

Posted
comment_46497

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

<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
comment_46499

итогового HTML

в смысле? из браузера выдрать чтоли?)

//upd

добавил этот же класс для кнопки входа. ссылка в профиле, принцип работы виден

  • Author
comment_47238

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

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

  • Author
comment_47249


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

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

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

 

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

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

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

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

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

  • Author
comment_49058

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



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

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

 

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

comment_49154

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

 

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

  • Author
comment_49256


Подозрительно. Перепроверил у себя - срабатывает. Дико извиняюсь, я в коде в названии класса картинки ошибся, начирикал .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.