Отображение прямоугольника под изображением при наведении курсора мыши на элементы справа - PullRequest
Новая
       28

Отображение прямоугольника под изображением при наведении курсора мыши на элементы справа

0 голосов
/ 03 апреля 2012

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

Проблема: с приложенным решением появляется описание, но оно перемещает также изображения справа.

вот код.

HTML 

<ul id="list-icons">
    <li>
       <img src="" class="icon" />
       <p class="popup">Test</p>
    </li>
      <li>
       <img src="" class="icon" />
       <p class="popup">Test2</p>

    </li>
</ul>

1010 * JQuery * 

<script>
$(".icon").hover(
  function () {
    $(this).next(".popup").slideToggle();
  });
</script>

CSS 

#list-icons li
{
  display:inline-block;
}

.icon {  
border: 1px solid #aaa;  
width:100px;
height:100px;
}  
.popup{
display:none;
width:100px;
}

где моя ошибка?

Ответы [ 2 ]

1 голос
/ 03 апреля 2012

Включите CSS, как показано ниже,

  1. Добавлен width: 100px в li вместо добавления в тег p. И тег width: 100px on img не будет применен.

  2. Добавлено vertical-align: top, чтобы изображение оставалось сверху, когда описание показано ниже.

CSS: 

#list-icons li
{
  display:inline-block;
  vertical-align: top;  
  width:100px;
}
.icon {  
  border: 1px solid #aaa; 
  height:100px;
}  
.popup{
  display:none;
  width:100px;
}

DEMO

1 голос
/ 03 апреля 2012

Попробуйте вообще без JavaScript:

Добавьте это к своему CSS: 

#list-icons li:hover .popup
{
  display:block;
}​

Fiddle: http://jsfiddle.net/maniator/E5zJM/

...