hover для другого элемента...

[bioz00]

есть таблица с ячейками и есть дивы соответствующие каждой ячейки. нужно чтоб при наведении курсора на определенную ячейку изменялся стиль соответствующего дива. как лучше это реализовать?

<table>

<tr>

<td class="cell">ячейка1</td>

<td class="cell">ячейка2</td>

<td class="cell">ячейка3</td>

</tr>

</table>

<div class="cdiv">1</div>

<div class="cdiv">2</div>

<div class="cdiv">3</div>

у дивов абсолютная позиция.

пробывал вкладывать дивы в ячейки, дабы "cell" был для них родительским классом и писать нужный стиль на ховер, но в этом случае opacity дивов работает корректно только в Опере.

Понимаю, что можно сделать на яваскрипте, но не хотелось бы. Есть варианты?

[swetlana]

а можно задачу целиком?

что-то подсказывает (может, упоминание об opacity?), что где-то тут лишний мудрёж.

[faiwer]

пробывал вкладывать дивы в ячейки, дабы "cell" был для них родительским классом и писать нужный стиль на ховер, но в этом случае opacity дивов работает корректно только в Опере.

.cell:hover .cdiv {}

не работает? если нет, то, я полагаю, дело в самом .cdiv, а не в hover-е )

[bioz00]

swetlana, При наведении курсора на ячейку, должна меняться прозрачность дива.

faiwer, я пробовал так:

.cell {

opacity:0.7;

}

.cell:hover {

opacity:1;

}

.cdiv {

position: absolute;

left....

top.....

opacity:inherit;

}

при этом содерржимое самих ячеек было в отдельном диве с ipacity 1.

проблема в том что позиционированные дивы с опасити оказываются "под" другими элементами. почему не ясно, пробовал z-index задавать, не помогло.

Edited February 26, 2011 by bioz00

[swetlana]

ять — это такая буква в старорусском алфавите. Почему-то она сейчас вспомнилась.

Полностью задачу опишите.

Макет покажите. Словами опишите желаемое поведение.

Вот эти невнятные обрывки чего-то, условно похожего на код, никакой ясности не вносят.

[faiwer]

проблема в том что позиционированные дивы с опасити оказываются "под" другими элементами. почему не ясно, пробовал z-index задавать, не помогло.

Не понял ) cdiv-ы оказывались "ниже" чем не-[position: absolute] элементы?

[bioz00]

Не понял ) cdiv-ы оказывались "ниже" чем не-[position: absolute] элементы?

Да, причем, если не задавать им опасити, то все ровно, но с опасити, даже в единицу, они проваливаюся.

Похоже дело в кривож..пости фокса и хромого Нужен другой вариант.

Edited February 26, 2011 by bioz00

[psywalker]

ТС

А ты релатив родителю задавал хулиган?

[bioz00]

ТС

А ты релатив родителю задавал хулиган?

разумеется, блин, я даже с з-индексами заморачивался

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

Edited February 26, 2011 by bioz00

[psywalker]

разумеется, блин, я даже с з-индексами заморачивался

Ааа, ну так я сначала то не увидел. Ячейкам таблицы нельзя задавать релатив. Точнее они не работают с абсолютами.

Сделай внутри ячейки див, а в нём уже помести свой див с прозрачностью.

	<td>
	  <div style="position:relative">
		<div style="position:absolute; top: -20px;"></div>
	  </div>
	</td>

[bioz00]

Сделай внутри ячейки див, а в нём уже помести свой див с прозрачностью.

И вроде бы не слишком хитро Спасибо.

Edited February 26, 2011 by bioz00

[psywalker]

И вроде бы не слишком хитро Спасибо.

Ну дык

[bioz00]

Есть такая нетривиальная задача:

Таблица с ячейками (красная) и другая таблица (зеленая)

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

Как видим в первой таблице одна ячейка со стилем второй таблицы.

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

Вторая таблица должна быть расположена под первой и не должна быть плавающей. (absolute, fixed не катит)

Возможно ли все это сделать на html, без джава? И если есть идеи как, буду очень признателен.

[Vlad]

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

[Int]

Яваскрипт не рассматривается?

[swetlana]

а можно ведь иногда элементы сделать дочерними, вынести на нужное место абсолютом — тогда будет работать.

Но это не в любом случае уместно, надо по задаче смотреть.

[bioz00]

Яваскрипт не рассматривается?

рассматривается, но в последнюю очередь.

swetlana, я пробовал подобный вариант.

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

Если можно было бы пихнуть ячейку(div) z-indexom, поверх первой таблицы, как дочерний элемент второй таблицы. Все было бы просто. Но при этом есть проблемы с позицией дива, в этих таблицах очень сложная динамическая структура. Не представляю, как ровно его позиционировать без явы.

[swetlana]

что-то не совсем понятно из объяснения, если честно.

Может не затруднит кинуть реальный макет, а не упрощённую схему?

[bioz00]

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

Edited March 2, 2011 by bioz00

[swetlana]

bioz00, я если смогу предложить вариант, то он будет удовлетворительным

честное пионерское.

Если будет неудовлетворительным, предлагать не стану.

[bioz00]

вот, вариант с дивом

<!DOCTYPE html><!--да да, он самый :)-->
<html>
<head>
  <style type="text/css">
  .tab1 {
background:orange;
opacity:0.75;
}

  .tab1:hover {
opacity:1;
}

  .tab2 {
position:relative;
background:red;
opacity:0.75;
}
  .tab2:hover {
opacity:1;
}

  .tab2 div {
position:absolute;
z-index:5;
top:-45px;
left:130px;
width:100px;
background:red;
}
   </style>
</head>

<body>
<table width='60%' align='center' class='tab1'>
  <tr>
	<td></td>
	<td width='100px'>cell1</td>
	<td width='100px'><!--cell2--></td>
	<td width='100px'>cell3</td>
	<td></td>
  </tr>
</table>
<br>
<table  width='40%' align='center' class='tab2'>
  <tr>
	<td>somecontent<div>cell2</div></td>
  </tr>
</table>
<br>
<table width='100%' bgcolor='teal'>
  <tr>
	<td>another content<br><br><br></td>
  </tr>
</table>
</body>
</html>

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