Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Смена картинки при наведении курсора

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
KuPbI4
Отправлено: 05 Апреля, 2014 - 03:33:59
Post Id


Частый гость


Покинул форум
Сообщений всего: 171
Дата рег-ции: Авг. 2010  


Помог: 0 раз(а)
Доброго времени суток!

Как сменить картинку при наведении курсора?
Знаю, что есть псевдокласс :hover, многие скажут об этом ответе. Но тут другая структура html кода.
Дело в том, что я не могу сообразить до конца, как при наведении курсора появилась другая картинка, она видна, но внутри картинки, и как же заставить при наведении курсора была другая картинка.

html:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <link rel="stylesheet" href="styletest.css" type="text/css" />
  3.  
  4. <ul class="nav">
  5.         <li class="item-105"><a href="#">Категория 1<img src="icon1.png"/></a></li>
  6.         <li class="item-106"><a href="#">Категория 2<img src="icon2.png"/></a></li>
  7. </ul>
  8.  
  9.  


css:
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. * {
  3.         margin: 0;
  4.         padding: 0;
  5. }
  6.  
  7. html, body {
  8.         height: 100%;
  9. }
  10.  
  11. body {
  12.         background-color: #000000;
  13. }
  14.  
  15. ul.nav li {
  16.         list-style: none outside none;
  17.         margin-bottom: 20px;
  18. }
  19.  
  20. ul.nav li a {
  21.         color: #88847d;
  22.         text-decoration: none;
  23.         padding-right: 5px;
  24. }
  25.  
  26. ul.nav li a:hover {
  27.         color: #ffba07;
  28.         text-decoration: none;
  29. }
  30.  
  31. ul.nav li a img {
  32.         float: right;
  33. }
  34.  
  35. ul.nav li.item-105 a:hover img {
  36.         background-image: url(icon1_active.png);
  37.         width: 30px;
  38.         height: 30px;
  39. }
  40.  
  41. ul.nav li.item-106 a:hover img {
  42.         background-image: url(icon2_active.png);
  43.         width: 30px;
  44.         height: 30px;
  45. }
  46.  
  47.  

(Отредактировано автором: 05 Апреля, 2014 - 03:35:18)

 
 Top
Ch_chov
Отправлено: 05 Апреля, 2014 - 06:47:19
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2121
Дата рег-ции: Июль 2008  
Откуда: из города


Помог: 90 раз(а)
Цитата:
<a href="#">Категория 2<img src="icon2.png"/>

Во первых, у вас тут тег не закрыт. Во вторых, основную картинку надо в css убрать. В третьих все иконки лучше оформить спрайтом, и в :hover менять только позицию фона.
 
 Top
KuPbI4
Отправлено: 05 Апреля, 2014 - 06:57:39
Post Id


Частый гость


Покинул форум
Сообщений всего: 171
Дата рег-ции: Авг. 2010  


Помог: 0 раз(а)
Цитата:
Во первых, у вас тут тег не закрыт. Во вторых, основную картинку надо в css убрать. В третьих все иконки лучше оформить спрайтом, и в :hover менять только позицию фона.


1. Какой тег тут не закрыт? Этот <img src=""/> ?
2. Основную картинку убрать в css? Она же находится в теге <img src="...">
3. Спрайтом Вы имеете ввиду, две иконки в одной .png или .jpg и потом уже можно в :hover менять позицию фона?
 
 Top
Ch_chov
Отправлено: 05 Апреля, 2014 - 07:12:59
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2121
Дата рег-ции: Июль 2008  
Откуда: из города


Помог: 90 раз(а)
KuPbI4 пишет:
1. Какой тег тут не закрыт?

Ошибся, он закрыт все таки.

KuPbI4 пишет:
Основную картинку убрать в css? Она же находится в теге <img src="...">

Уберите <img/> совсем. Все картинки, которые относятся к оформлению подключайте через стили.

KuPbI4 пишет:
Вы имеете ввиду, две иконки в одной .png или .jpg и потом уже можно в :hover менять позицию фона?
Да, и необязательно две. Можно все однотипные иконки в спрайт собрать.
 
 Top
KuPbI4
Отправлено: 05 Апреля, 2014 - 16:59:03
Post Id


Частый гость


Покинул форум
Сообщений всего: 171
Дата рег-ции: Авг. 2010  


Помог: 0 раз(а)
Ch_chov, спасибо за советы.

Предположим эта html структура с движка Joomla 3.2.3. Когда добавляем меню и там есть возможность загрузить картинку или иконку, и поэтому задал вопрос.
Сделал спрайтом и попробовал, получается.

CSS:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. ul.nav li a img {
  3.         float: right;
  4. }
  5.  
  6. li.item-105 a {
  7.         background: url("images/icon1spite.png") 0 0 no-repeat;
  8.         width: 30px;
  9.         height: 30px;
  10. }
  11.  
  12. li.item-105 a:hover {
  13.         background: url("images/icon1spite.png") 0 -32px no-repeat;
  14.         width: 30px;
  15.         height: 30px;
  16. }
  17.  


Но единственная причина, в том,что если удалить через добавленное меню картинку, то что указано в CSS - картинка не будет отображаться. Есть идеи?

UPDATE:
Получилось, только таким способом:
CSS:
CODE (html):
скопировать код в буфер обмена
  1.  
  2. li a img {
  3.         visibility: hidden;
  4. }
  5.  
  6. li.item-105 a {
  7.         background: url("images/icon1spite.png") 0 0 no-repeat;
  8.         width: 30px;
  9.         height: 30px;
  10.         visibility: visible;
  11. }
  12.  
  13. li.item-105  a:hover {
  14.         background: url("images/icon1spite.png") 0 -32px no-repeat;
  15.         width: 30px;
  16.         height: 30px;
  17. }
  18.  

Осталось оформить как нужно..

UPDATE:
Хотелось бы таким способом сделать, но показывает полную картинку, а хотелось бы наполовину:

CODE (html):
скопировать код в буфер обмена
  1.  
  2. li a img {
  3.         float:right;
  4. }
  5.  
  6. li a:hover img {
  7.         margin-top: -32px;
  8. }
  9.  

Прикреплено изображение (Нажмите для увеличения)
1.png

(Отредактировано автором: 05 Апреля, 2014 - 18:18:28)

 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB