Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.02.2011, 08:30
Новичок на форуме
Отправить личное сообщение для Tass Посмотреть профиль Найти все сообщения от Tass
 
Регистрация: 16.02.2011
Сообщений: 4

Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки?
Есть таблица. В одном столбце меню из графических кнопок, которые при наведении курсора меняются, в другом - текстовые ссылки, которые по идее должны отображаться при наведении курсора на графические кнопки.
Т.е. должно быть так:
1) "в состоянии покоя"

2) при наведении курсора

Ума не приложу, как это сделать в css почти все перепробовала, не помогло, стала искать способ осуществить задуманное с помощью javascript, но нашла только как сделать, чтобы при наведении на разные ссылки контент менялся в одном блоке, а у меня разные блоки( еще, наверное, нехорошо несколько раз для одной картинки использовать onmouseover
Кто знает, помогите, пожалуйста, сделать... я не нашла такого скрипта нигде, а вроде на вид не должно быть сложно...
Ответить с цитированием
  #2 (permalink)  
Старый 16.02.2011, 10:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от Tass
в css почти все перепробовала
Плохо пробовала... Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
.button {
	width: 400px;
	height: 50px;
	border: 1px solid;
	overflow: hidden;
	font-size: 14pt;
	cursor: pointer;
}
.b_box {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background-color: blue;
}
.b_tit {
	color: #ffffff;
	height: 100%;
	width: 50%;
	float: left;
	text-align: center;
}
.b_tit > span {
	position: relative;
	top: 15px
}
.arrow {
	position: absolute;
	top: 20px;
	left: 50%;
	display: none;
	width: 10px;
	height: 10px;
	background-color: #ffffff;
}
.link {
	position: relative;
	top: 15px;
	display: none;
	margin-left: 55%;
	color: #ffffff;
}
.b_box:hover > .b_tit {
	color: blue;
	background-color: #ffffff;
}
.b_box:hover > .arrow {
	display: block;
}
.b_box:hover > .link {
	display: block;
}
</style>
<script>
</script>
</head>
<body>
<div class='button'>
	<a class='b_box' href='#'>
		<p class='b_tit'><span>О компании</span></p>
		<div class='arrow'></div>
		<p class='link'>Link1 Link2</p>
	</a>
</div>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 16.02.2011, 15:50
Новичок на форуме
Отправить личное сообщение для Tass Посмотреть профиль Найти все сообщения от Tass
 
Регистрация: 16.02.2011
Сообщений: 4

Спасибо большое... только у меня кнопки и текстовые ссылки в разных ячейках таблицы. Там даже классы так не расставить...
Ответить с цитированием
  #4 (permalink)  
Старый 16.02.2011, 21:43
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от Tass
только у меня кнопки и текстовые ссылки в разных ячейках таблицы. Там даже классы так не расставить
Прям как в анекдоте:
- Доктор. Когда я делаю вот так (скручивается в немыслемую позу)... У меня сильно болит вот здесь.
- Не делайте так.
Ответить с цитированием
  #5 (permalink)  
Старый 16.02.2011, 21:48
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

что мешает в ячейки вложить контейнеры и им присвоить классы?(код и примеры не смотрел)
Ответить с цитированием
  #6 (permalink)  
Старый 16.02.2011, 22:43
Новичок на форуме
Отправить личное сообщение для Tass Посмотреть профиль Найти все сообщения от Tass
 
Регистрация: 16.02.2011
Сообщений: 4

ksa, да-да, я уже подумала об этом) еще помучаюсь немного и переделаю таблицу

dmitriymar, в предложенном выше коде и кнопка, и текстовые ссылки заключены в один тег <a> и в один тег <div>. И код уже не действует(
Ответить с цитированием
  #7 (permalink)  
Старый 16.02.2011, 22:55
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

Tass,не понимаю я чего то о чём вы....
Ответить с цитированием
  #8 (permalink)  
Старый 17.02.2011, 09:06
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от Tass
еще помучаюсь немного
Святое дело!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать кнопку , аналог F11 ? greysells Events/DOM/Window 2 07.07.2009 09:04
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 23:24
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 24.05.2008 00:55