2014-10-10 2 views
0

У меня проблема, я не могу найти решение.jQuery нижнее положение или переход назад?

У меня есть 4 иконки в DIV так:

<div class="icons"> 
    <img id="planung" src="assets/images/charts/ablauf/planung.png" /> 
    <img id="machbarkeit" src="assets/images/charts/ablauf/machbarkeit.png" /> 
    <img src="assets/images/charts/ablauf/entwicklung.png" /> 
    <img src="assets/images/charts/ablauf/innovation.png" /> 
</div> 

Теперь у меня есть текстовые поля выше, которые имеют высоту и ширину 0, как так:

<div class="ablauftext" id="planungtext"> 
     ASD 
</div> 
<div class="ablauftext" id="machbarkeittext"> 
     ASD 
</div> 

Текстовые поля являются анимированные над значками. Например, «planungtext» выравнивается в левом верхнем углу значка «planung». Значок div имеет ширину 80%, а сами значки расположены через выравнивание. Итак, теперь я использую jQuery, чтобы получить позицию каждого значка. Теперь проблема в том, что смещение получает только верхнюю и левую позиции. Теперь, когда я устанавливаю эти позиции и добавляю отрицательный край высоты, он отлично позиционируется поверх значка. Проблема в том, что переход, когда я нажимаю на значок «planung», находится сверху слева направо. Конечно, это так, как я установил верхнее значение.

Теперь две вещи, которые могли бы сделать эту работу:

А) Есть ли какой-нибудь способ, чтобы получить нижнюю позицию моей иконкой, а не сверху, или B) Есть ли какой-нибудь способ изменить свой переход ?

+0

Честно говоря, если это вариант, я бы переформатировал ваш HTML, чтобы ваши значки были в их собственном контейнере, таким образом вы можете иметь свой значок и текст внутри контейнера, который точно знает, где все намного проще, чем позиционированный элемент – ntgCleaner

+0

Я действительно не понимаю, как вы это понимаете. Не могли бы вы дать мне более конкретный пример? –

ответ

0

Мой пример, который не обязательно может быть ответ: Переформатирование HTML, чтобы ваш значок и текст в той же содержащей DIV

<div class="icons"> 
    <div class="icon"> 
     <img id="planung" src="assets/images/charts/ablauf/planung.png" /> 
     <div class="ablauftext" id="planungtext"> 
      ASD 
     </div> 
    </div> 
    <div class="icon"> 
     <img id="machbarkeit" src="assets/images/charts/ablauf/machbarkeit.png" /> 
     <div class="ablauftext" id="machbarkeittext"> 
      ASD 
     </div> 
    </div> 
    <div class="icon"> 
     <img src="assets/images/charts/ablauf/entwicklung.png" /> 
    </div> 
    <div class="icon"> 
     <img src="assets/images/charts/ablauf/innovation.png" /> 
    </div> 
</div> 

Теперь, вместо того, чтобы использовать JQuery .position(), чтобы найти место, вы может просто вырезать эту часть и показать и скрыть текстовый div. Просто position:absolute ваши изображения и текст внутри класса .icon.

Оставить комментарий, если вам нужна дополнительная информация. Если вам нужна дополнительная информация, мне может понадобиться дополнительная информация от вас.

+0

это может сработать. Я провешу его в понедельник и дам знать! спасибо –

+0

@frederikwitte, проблем нет. Дайте мне знать, если вы столкнетесь с другими неприятностями с этим – ntgCleaner

+0

Woops, забыли ответить! Это работает отлично! –

Смежные вопросы