Форум

Tass · #1 (**permalink**) 16.02.2011, 08:30

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

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

Ума не приложу, как это сделать

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

Кто знает, помогите, пожалуйста, сделать... я не нашла такого скрипта нигде, а вроде на вид не должно быть сложно...

ksa · #2 (**permalink**) 16.02.2011, 10:43

Сообщение от 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 · #3 (**permalink**) 16.02.2011, 15:50

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

ksa · #4 (**permalink**) 16.02.2011, 21:43

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

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

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

dmitriymar · #5 (**permalink**) 16.02.2011, 21:48

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

Tass · #6 (**permalink**) 16.02.2011, 22:43

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

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

dmitriymar · #7 (**permalink**) 16.02.2011, 22:55

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

ksa · #8 (**permalink**) 17.02.2011, 09:06

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

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

Святое дело!

Форум

Справочник

Discord чат

Курсы javascript