Подскажите, как решить проблему!

das07 · 15-10-2012, 15:04:36

Здравствуйте, подскажите как и каким методом решить задачу!
Разрабатываю новый дизайн для сайта, вот сам дизайн - mrindex.ru, хочу, чтобы при наведении курсора мыши на ссылку, например, части речи, внизу появлялся скрытый текст "Пройти тест", а ссылка, которая идет немного ниже сдвигалась вниз, тем самым открывала пространство для ссылки "пройти тест". Скажите пожалуйста каким методом это сделать и очень подробно пожалуйста! Заранее благодарен!

Kylaksizov · 27-10-2012, 11:47:10

Знаю что можно с помощью простого css3, но забыл

Обратись к ---. Если он свободен, то подскажет.

Clever · 27-10-2012, 15:59:31

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

Код Выделить

<div class="col1">
			<p class="intro">Части речи</p>
<h5><a href="http://best-language.ru/nekotorye-chasti-rechi" title="Части речи" class="dot">Части речи</a></h5>
<h5><a href="http://best-language.ru/sushchestvitelnoe" title="Существительное" class="dot">Существительное</a></h5>
<h5><a href="http://best-language.ru/glagol" title="Глагол" class="dot">Глагол</a></h5>
</div>

Итак , как я понял задача чтобы каждый из пунктов ссылок (в данном коде их три) при наведении вызывал свою кнопку , при нажатии на которую ... в общем что будет при нажатии , дело другой темы , а здесь автор топика просит помочь с появлением кнопок при наведении.
Постараемся обойтись без скриптов .
Для этого нужно обернуть все что находится между <h5></h5> в контейнер , допустим пусть это будет <div></div> , и туда же добавить кнопку пройти тест. Выглядеть это будет так:

Код Выделить

<div>
        <h5>
          <a href="http://best-language.ru/nekotorye-chasti-rechi" title="Части речи" class="dot">Части речи</a>
        </h5>
        <button onclick="alert('Прохождение теста')">Пройти тест</button>
      </div>

Для наглядности я на кнопку повесил событие onclick , потом его можно убрать , это для примера.

И теперь остается поработать со стилями , чтобы визуально был один вид , а при наведении другой (появлялась кнопка)
Допустим так:

Код Выделить

      .col1 div {
        width:200px;
        height:40px;
        overflow:hidden;
      }
      .col1 div:hover {
        height:100px;
      }
      .col1 div, .col1 div:hover {
        -webkit-transition: All 1.0s ease-in-out;
        -moz-transition: All 1.0s ease-in-out;
        -o-transition: All 1.0s ease-in-out;
        -ms-transition: All 1.0s ease-in-out;
        transition: All 1.0s ease-in-out;
      }

Свойство transition не обязательное здесь , но оно дает плавное открытие блока.

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

Код Выделить

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="windows-1251" />
    <title>эффекты при наведении мышки</title>
    <style>
      .col1 div {
        width:200px;
        height:40px;
        overflow:hidden;
      }
      .col1 div:hover {
        height:100px;
      }
      .col1 div, .col1 div:hover {
        -webkit-transition: All 1.0s ease-in-out;
        -moz-transition: All 1.0s ease-in-out;
        -o-transition: All 1.0s ease-in-out;
        -ms-transition: All 1.0s ease-in-out;
        transition: All 1.0s ease-in-out;
      }
    </style>
  </head>
  
  <body>
    <div class="col1">
      <p class="intro">Части речи</p>
      <div>
        <h5>
          <a href="http://best-language.ru/nekotorye-chasti-rechi" title="Части речи" class="dot">Части речи</a>
        </h5>
        <button onclick="alert('Прохождение теста')">Пройти тест</button>
      </div>
      <div>
        <h5>
          <a href="http://best-language.ru/sushchestvitelnoe" title="Существительное" class="dot">Существительное</a>
        </h5>
        <button onclick="alert('Прохождение теста')">Пройти тест</button>
      </div>
      <div>
        <h5>
          <a href="http://best-language.ru/glagol" title="Глагол" class="dot">Глагол</a>
        </h5>
        <button onclick="alert('Прохождение теста')">Пройти тест</button>
      </div>
    </div>
  </body>

</html>

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

Kylaksizov · 27-10-2012, 16:46:08

Да прикольные вещи можно делать с помощью css3

das07 · 27-10-2012, 17:09:27

Огромное вам спасибо! Есть же хорошие люди!!!

Clever · 27-10-2012, 21:15:58

Всегда рад помочь если есть время

Подскажите, как решить проблему!

das07

Kylaksizov

Clever

Kylaksizov

das07

Clever