Javascript-форум - Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? (https://javascript.ru/forum/misc/15185-kak-sdelat-chtoby-pri-navedenii-na-knopku-sprava-ot-nee-poyavlyalis-tekstovye-ssylki.html)

Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки?

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

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

Ума не приложу, как это сделать :( в css почти все перепробовала, не помогло, стала искать способ осуществить задуманное с помощью javascript, но нашла только как сделать, чтобы при наведении на разные ссылки контент менялся в одном блоке, а у меня разные блоки( еще, наверное, нехорошо несколько раз для одной картинки использовать onmouseover :blink:
Кто знает, помогите, пожалуйста, сделать... я не нашла такого скрипта нигде, а вроде на вид не должно быть сложно...

Цитата:

Сообщение от 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>

Спасибо большое... только у меня кнопки и текстовые ссылки в разных ячейках таблицы. Там даже классы так не расставить...

Цитата:

Сообщение от Tass

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

Прям как в анекдоте:
- Доктор. Когда я делаю вот так (скручивается в немыслемую позу)... У меня сильно болит вот здесь.
- Не делайте так.

что мешает в ячейки вложить контейнеры и им присвоить классы?(код и примеры не смотрел)

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

dmitriymar, в предложенном выше коде и кнопка, и текстовые ссылки заключены в один тег <a> и в один тег <div>. И код уже не действует(

Tass,не понимаю я чего то о чём вы....

Цитата:

Сообщение от Tass

еще помучаюсь немного

Святое дело! :D