Remote Linking

Vorpall · July 8, 2011

Здравствуйте!

Нашёл вот тут интересный CSS-приёмчик. Автор называет его remote linking. Заключается он в том, что при наведении курсора на один объект, hover срабатывает не только у этого объекта, но и у какого-нибудь другого, и наоборот. Попытался приспособить эту штуку под свой сайт на Wordpress - ничего не вышло, не смог разобраться в CSS. Поиск решения на форуме и в Гугле результатов не принёс. Прошу подтолкнуть в правильном направлении.

Имеется страница, на ней два объекта - заголовок и рамка вокруг текста.

При наведении курсора на заголовок, плавно меняется цвет его фона.

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

Хочется чтобы при наведении заголовок и рамка меняли цвет одновременно, и всё это выглядело вот так.

Прилагаю PHP и таблицу стилей:

index.php

style.css

Заранее благодарю!

rookie · July 8, 2011

Примерно вот так это делается:


<!DOCTYPE html>
<html>
 <head>
 <meta charset=utf-8 />
 <title>Blah</title>
 <style>
  .box {
    width: 600px;
    height: 400px;
    padding: 30px;
    margin: 50px auto;
    background: #bbb;
  }
  .box h1 {
    color: #fff;
    background: #369;
  }

  .box h1,
  .post {
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
  }

  .box:hover h1 {
    background: #c33;
  }

  .post {
    border: 1px solid #fff;
  }

  .box:hover .post {
    border-color: #c33;
  }
  </style>
</head>
<body>
  <div class="box">
    <h1>Headline</h1>
    <div class="post">
      <p>Blah-blah-blah...</p>
    </div>
  </div>
</body>
</html>

Смысл в том, что стили меняются не при наведении на заголовок а на контейнер в котором находятся и заголовок и блок с рамкой, а т.к. последние являются childnodes первого, то и при наведении на них эффект срабатывает.

Edited July 8, 2011 by rookie

Vorpall · July 8, 2011

Примерно вот так это делается:

У меня заголовок (.postTitle) и блок с рамкой (.post) содержатся внутри блока .postWrapper. Я дописываю в CSS:

li.postWrapper: hover .postTitle .post {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}

... и ничего не работает.

Что я упускаю?

Searcher · July 8, 2011

во-первых, пробел перед hover не нужен

во-вторых, .post должен быть вложен в .postTitle

Тогда сработает, но лучше так:

li.postWrapper:hover .post {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
}

rookie · July 8, 2011

У меня заголовок (.postTitle) и блок с рамкой (.post) содержатся внутри блока .postWrapper. Я дописываю в CSS:
li.postWrapper: hover .postTitle .post {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
}
... и ничего не работает.
Что я упускаю?

1)

.postTitle,
.post {
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;

2) никода не разделяйте пробелом двоеточие и имя псевдокласса - :hover но не - : hover

Edited July 8, 2011 by rookie

Vorpall · July 8, 2011

Попробовал и так, и так - ничего не вышло.

Попытался по-другому. Объединил заголовок и область с текстом div'ом в один class.


<div class="titleNpost">
	<h2 class="postTitle"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
	<p class="date"><small><?php the_date(); ?>, автор: <?php the_author_posts_link(); ?></small></p>
	<div class="post">
		<?php the_post_thumbnail(); ?>
		<?php the_content(__('(more...)')); ?>
	</div>
</div>

В CSS прописал как при наведении курсора должен изменяться div вместе со всем содержимым:

div.titleNpost:hover .postTitle,
.post {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
}

Проблема не решилась.

div.titleNpost:hover  {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
}

Такая запись тоже не помогла.

Очень хочется разобраться как это всё работает.

rookie · July 8, 2011

Немного изменил Вашу разметку, но думаю разберетесь:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Blah</title>
<style>
  .titleNpost {
    width: 600px;
    height: 400px;
    padding: 30px;
    margin: 50px auto;
    background: #bbb;
  }
  .titleNpost h2 {
    color: #fff;
    background: #369;
  }

  .titleNpost h2,
  .post {
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
  }

  .titleNpost:hover h2 {
    background: #c33;
  }

  .post {
    border: 1px solid #fff;
  }

  .titleNpost:hover .post {
    border-color: #c33;
  }

</style>
</head>
<body>
  <div class="titleNpost">
        <h2 class="postTitle">Title</h2>
        <div class="post">
          Blah-blah...
        </div>
</div>
</body>
</html>

Весь фокус в том чтобы прописать transition элементам в дефолтном состоянии, а не когда у контейнера - :hover

Sign In

Remote Linking

Question

Vorpall

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

rookie

Link to comment

Share on other sites

Vorpall

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

rookie

Link to comment

Share on other sites

Vorpall

Link to comment

Share on other sites

rookie

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information