0

Доброго всем времени суток

<div style="...">наводим мышкой сюда</div>
<div style="display: none;">показываем это</div>

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

p.s. мой аналогичный, некорректно заданный вопрос

4 ответа 4

4

Решение на css. Сдвиг влево и ширина указаны для красоты.

<style>
.tipped{position:relative}
.tipped .tip{display:none;position:absolute;top:-20px;left:50%;margin-left:-100px;width:200px}
.tipped:hover .tip{display:block}
</style>

<div class="tipped">
    <div class="tip">показываем это</div>
    наводим мышкой сюда
</div>
2
  • 2
    Или можно чуть проще: <span class="tooltip"">Текст с пояснением</span> CSS: .tooltip:hover:before { content: 'Всплывающая подсказка'; position: absolute; margin-top: -25px; background: #fff; } Commented 2 авг. 2012 в 7:55
  • все гениально и просто. спасибо!
    – sergey
    Commented 2 авг. 2012 в 8:17
1

Тебе надо див с подсказкой обозначить как position: absolute; z-index: 20;, потом брать координаты нажатого дива с помощью position() и применять эти координаты к показываемому диву, попутно убирая стиль display: none

3
  • Зачем так сложно то ? Commented 2 авг. 2012 в 6:31
  • Чтобы можно было повесить красивых эффектов и прочего.
    – oburejin
    Commented 2 авг. 2012 в 6:54
  • @shurik, в вопросе сказано: > что бы див не сдвигал содержимое страницы в низ, а появлялся над областью на которую навели мышкой Так что, @oburejin в правильную сторону шагает.
    – Deonis
    Commented 2 авг. 2012 в 6:55
1

Можно воспользоватся css, для этой задачи JS не нужен.

Собственно как то так

1
  • да, но нужно место для того что скрыто
    – sergey
    Commented 2 авг. 2012 в 8:14
1

Попробуйте такой вариант (на jQuery). Подрихтуете CSS, эффекты и т.д. под свои цели.

<div class="target_obj">наводим мышкой сюда</div>
<div class="floating_object">показываем это</div>

JS

var flo = $('.floating_object').hide();
var tar = $('.target_obj');

tar.mouseenter(function(){
    var posTop = $(this).offset().top;
    var posLeft = $(this).offset().left;
    var minW = $(this).width();
    $(this).next(flo).css({
        top: posTop,
        left: posLeft,
        minWidth: minW
    }).fadeIn();
});

flo.mouseout(function(){
    $(this).delay(500).fadeOut();
});
1
  • пример шикарен, в плане общего применения. конкретно под мою маленькую задачу, я ограничусь версией от ling'а. но этот безусловно возьму на вооружение. спасибо
    – sergey
    Commented 2 авг. 2012 в 8:16

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.