Jump to content

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

Featured Replies

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

<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 и возможно не правильно всё делаю...

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/
Share on other sites

Лучше кусок итогового HTML приведи, чтобы было видно, что и как.

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=46498
Share on other sites

итогового HTML

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

//upd

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

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=46499
Share on other sites

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

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

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=47238
Share on other sites

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

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=47242
Share on other sites


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

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

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

 

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

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=47249
Share on other sites
  • 1 месяц спустя...

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

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

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

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=48497
Share on other sites

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



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

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

 

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

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=49058
Share on other sites

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

 

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

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=49154
Share on other sites


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

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

 

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

Link to comment
https://ipbmafia.ru/topic/6046-obshij-hover-kartinki-i-teksta/?&do=findComment&comment=49256
Share on other sites

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.