Относительно градиента не заморачивайтесь.
Мне надо, чтобы текст стоял ниже а картинка была над текстом. При наведении мыши на пункт меню подсвечивался текст и менялась картинка с черно-белой на цветную.
Я делал так:
HTML
<ul class="pages-menu">
<li><a href="#" title="#"><img src="images/home-a.png" onmouseover="this.src='images/home-h.png';" onmouseout="this.src='images/home-a.png';" />Главная</a></li>
<li><a href="#" title="#"><img src="images/sitemap-a.png" onmouseover="this.src='images/sitemap-h.png';" onmouseout="this.src='images/sitemap-a.png';" />Site Map</a></li>
<li><a href="#" title="#"><img src="images/advertise-a.png" onmouseover="this.src='images/advertise-h.png';" onmouseout="this.src='images/advertise-a.png';" />Реклама</a></li>
<li><a href="#" title="#"><img src="images/support-a.png" onmouseover="this.src='images/support-h.png';" onmouseout="this.src='images/support-a.png';" />Контакты</a></li>
</ul>CSS
.pages-menu {
list-style:none;
margin:0 auto;
font-size:14pt;
color:#333;
}
.pages-menu a {
color:#666;
text-decoration:none;
}
.pages-menu a:hover {
color:#333;
text-decoration:underline;
}
.pages-menu li {
display:block;
list-style:none;
float:left;
line-height:12pt;
}У меня не получается сделать так, чтобы при наведении мыши сразу менялось изображение и менялся цвет текста и происходило подчеркивание. Если я навожу на ссылку то ссылка видоизменяется, если на изображение то изображение меняется. По сути при наведении даже на пустое пространство в пределах ссылки (между разделителями) тоже должна быть ссылка. А там пусто. Как сделать так, чтобы одновременно они менялись, и чтобы каждый блок (квадратик меню) был как ссылка, как только войдешь в зону пункта меню?
<a href="#"><li><ing src="#" />ТЕКСТ</li></a>Спустя 219 сек.
С зонами меню можно поступить так:
.pages-menu {
list-style:none;
margin:0 auto;
font-size:14pt;
color:#333;
height:75px;
}
.pages-menu a {
color:#666;
text-decoration:none;
display:block;
width:100px;
height:75px;
}
.pages-menu a:hover {
display:block;
width:100px;
height:75px;
color:#333;
text-decoration:underline;
}
.pages-menu li {
display:block;
width:100px;
height:75px;
list-style:none;
float:left;
line-height:12pt;
}
Но все равно, при попадании курсора мыши в область пункта меню действие происходит только нат текстом а изображение, до сих пор ждет чтобы его погладили по головке… как реализовать одновременно?
