Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Смена стилей текста при наведении мышкой

Автор: stt 26.2.2007, 21:41

короче тема такая нужно сделать при наведении на ячейку высвечивается текст(ссылка)
при убирании мыши тест просто перекрашивается в цвет фона ( типо не видно)
далее и нужно сделать, чтобы при наведении (шрифт меняется) ссылку типо видно и можно на нее нажать! вот пример кода чет у меня не канает. подскажите плз.

Код


body   bgcolor="000000" text="#000000" link="#ffffff" vlink="#ffffff" alink="#808080" onload="test()">
<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:1; left: 9px; top: 10px;">
  <div id="Layer2" style="position:absolute; width:100%; height:100%; z-index:1; left: 2px; top: 0px;">
    <table width="100%" height="100%%" border="0">
  <tr>
    <td width="30%" 
     height="30%" valign="top" 
         <a href="Kontakt.html"target="window-1" onMouseOver="this.style.color='#ffffff';", OnMouseOut="this.style.color='000000';"> Диагностика и ремонт электрооборудовани</a>

Автор: Aliance 26.2.2007, 21:51

в ссылке должен стоять дефолтный цвет в стилях. и пробел между target и href поставь.

Автор: Sardar 26.2.2007, 21:55

stt, курим http://www.w3schools.com/css/css_pseudo_classes.asp. JS тут не нужен.
Название давай грамотное, "Помогите со скриптом" это верх не информативного названия топа.

Автор: stt 27.2.2007, 10:11

как это не нужно? CSS anchor:hover че это?
так то работает, но не идет как ссылка в чем прикол?

Автор: stt 27.2.2007, 12:07

Живые имеются? smile

Автор: Olone 27.2.2007, 15:23

Пример:

Код


....
a:hover{color:#bf0000}
....
<a href="">link</a>
...

После объявления стилей все ссылки при наведении будут менять цвет.

Автор: stt 27.2.2007, 19:47

Все это конечно хорошо. Но у меня такая фишка. наводишь на часть картинки(ячейка таблицы) и появляется текст в другом месте(типо подсказка), далее нужно на нее навести и она должна сработать как ссылка!
как мне разрешить такую проблему?

Автор: Olone 28.2.2007, 10:26

Цитата

курим CSS anchor:hover. JS тут не нужен.

Не могу догнать, как с помощью CSS это сделать, разве можно задавать свойства другого объекта в a:hover ? smile

С помощью JS это сделать возможно.
Код ячейки с картинкой :

Код


<td OnMouseOver="document.links[0].style.color='#000000';" OnMouseOut="document.links[0].style.color='#ffffff';">

Соответсвенно нужно учесть:
1. Ссылка изначально должна быть невидимой (цвет ссылки=фон)
2. Иерархия объектов в JavaScript. Статья: http://buy-site.ru/text_128_84.html

Автор: Sardar 28.2.2007, 15:17

Цитата(stt @ 27.2.2007, 09:11

)

так то работает, но не идет как ссылка в чем прикол?

Приведи полную вёрстку. Если href не указал, то ссылка "не будет ссылкой".

Цитата(stt @ 27.2.2007, 18:47

)

Но у меня такая фишка. наводишь на часть картинки(ячейка таблицы) и появляется текст в другом месте(типо подсказка)

Проще сделать ссылку display: block; position: relative;, внутрь положить слой с подсказкой на position: absolute; и left/top в нужную позицию. Хотя изврат конечно, в таком случае действительно лучше JS'ом открывать. По событиям onmouseover, onmouseout меняешь .style.display = "none/block", сами подсказки выбираешь либо по id, либо ложишь в какой контейнер и по порядковому номеру.

Автор: stt 28.2.2007, 18:39

чет вата какая то я хотел поставить на ячейку onmouseover и это не канает чет, тип видно как текст становится код smile

Автор: Sardar 28.2.2007, 20:28

Цитата(stt @ 28.2.2007, 17:39

)

тип видно как текст становится код

...

лучше приведи код smile

Автор: korisarimi 28.2.2007, 20:46

Ввиду вышеуказынных пояснений к изначальному вопросу, думаю топ необходимо переименовать...