9 февраля 2012 в 10:21
Подскажите, почему не работает ни один вариант смены картинки при наведении мыши:
1 вариант
html
<a href="#" class="rollover"> </a>
css
A.rollover {
background: url(images/sun1.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
}
A.rollover:hover {
background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком */
}
background: url(images/sun1.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
}
A.rollover:hover {
background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком */
}
2 вариант
html
<a href="1.html" class="rollover"></a>
css
A.rollover {
background: url(images/mark.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position: 0 -40px; /* Смещение фона */
}
background: url(images/mark.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position: 0 -40px; /* Смещение фона */
}
Комментарии
http://www.drupal.ru/node/76068
а сама картинка появляется фоном? До наведения
й
нет не появляется пустое место
1
1
а у вас css файл случайно не в отдельной папке лежит?
файл в themes/bartik/css/style.css
значит дело в путях к картинке.
background: url(sun1.png); /* Путь к файлу с исходным рисунком */
сделай так и попробуй картинку положить в ту же папку где css файл лежит.
background: url(../images/mark.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position: 0 -40px; /* Смещение фона */
}<!--break-->
путь к картинке подправьте добавив вначале пути ../
Спасибо! Вы мне очень помогли. А то я намучился уже в поисках решения)