div не отображается на картинке hover

Question

не может понять, почему мой div не будет отображаться на этом наведении, любая помощь будет оценена.

$('a[rel=tooltipimage]').bind('mouseover',function(e){ 
e=e?e:window.event; 
$('#tooltip').css({ 
position:'absolute', 
top:e.pageY, 
left:e.pageX 
}); 
}) 

HTML:

</span> 
<a href="#" class="tooltipimage"><img src="/applications/images/icons/info_icon.gif"/></a> 
</span> 
<div class="tooltip" style="margin:0 0 0 18px; display:none;"> 
<b>tooltip text goes here</b><br />                 
</div> 

все, что я пытаюсь сделать, это дисплей, Div плавающий рядом с изображением, когда они исчезают, и наведении курсора мыши, когда они уходят. У меня установлен jquery и все, но я не хочу вставлять кучу аддонов и прочее, когда все, что мне нужно, является самым простым из всплывающих подсказок. если бы я не был в классическом asp, я мог бы использовать modalpopup, но, к сожалению, не повезло.

Спасибо заранее, NickG

Answer 1

Если вы можете изменить некоторые из ваших html, вам не нужно использовать javascript (если позиционирование не должно быть динамическим, тогда вы можете установить его с помощью javascript). Вы можете сделать это с помощью простого css. Если вы просто хотите небольшой текст, вы всегда можете использовать title атрибута

DEMO

<span class="tooltipimage"> 
    <a href="#"><img src="/applications/images/icons/info_icon.gif"/></a> 
    <label>tooltip text goes here</label> 
</span> 


.tooltipimage:hover label{ 
    display:block; 
} 

.tooltipimage label{ 
    display:none; 
    position:absolute; 
    top:0px; 
    left:20px; 
} 

.tooltipimage{ 
    display:block; 
    position:relative; 
} 

Answer 2

$('a[rel="tooltipimage"]') 

Я думаю, что вам нужны кавычки.

Answer 3

Ваш код должен быть, как этот

$('a.tooltipimage').bind('mouseover',function(e){ 
e=e?e:window.event; 
$('.tooltip').css({ 
position:'absolute', 
top:e.pageY, 
left:e.pageX 
}); 
}) 

Поскольку подсказке класс не ID

Answer 4

Ваши селекторы неправильно. Это должно быть

$('a.tooltipimage').bind('mouseover',function(e){ 
    e = e ? e : window.event; 
    $('.tooltip').css({ 
     position:'absolute', 
     top:e.pageY, 
     left:e.pageX, 
     display: 'block' 
    }); 
}); 

Answer 5

В вашем коде есть несколько ошибок. Попробуйте это:

$('a.tooltipimage').hover(function (e) { 
    e = e ? e : window.event; 
    $('.tooltip').show().css({ 
     position: 'absolute', 
     top: e.pageY, 
     left: e.pageX 
    }) 
}, function() { 
    $('.tooltip').hide() 
}); 

jsFiddle example

• Вы подбирали a[rel=tooltipimage], который не существует, но a.tooltipimage делает.
• Вы также выбрали #tooltip, которого нет, но .tooltip.
• .bind() осуждались в пользу .on() от 1,7
• Вашего диапазона открывающего тег неверен, но я предполагаю, что это просто опечатка.
• Поскольку вы также хотели скрыть всплывающую подсказку, я использовал .hover(), чтобы скрыть всплывающую подсказку на мышином фоне.

Answer 6

Ваш тэг не имеет атрибута rel, который равен tooltipimage. Однако он имеет класс с именем tooltipimage. Также вы скрывали всплывающую подсказку, но не отображали ее снова.

Следующая следует сделать трюк:

DEMO

$('a.tooltipimage').bind('mouseover',function(e){ 
    e=e?e:window.event; 
    $('.tooltip').css({ 
     display: 'block', 
     position:'absolute', 
     top:e.pageY, 
     left:e.pageX 
    }); 
}) 

Незначительная ошибка в вашем HTML является то, что у вас есть 2 пролетных закрытия тегов, но нет, начиная из них.

Answer 7

Есть несколько вещей неправильно с вашим кодом, ваш первый span закрывается, не открывается, вы используете неправильный переключатель для якоря, и вы используете селектор идентификатора вместо класса селектор для div. После того, как вы примените все css к вашему div, вы должны его показать.

Markup:

<span> 
<a href="#" class="tooltipimage"><img src="/applications/images/icons/info_icon.gif"/></a> 
</span> 
<div class="tooltip" style="margin:0 0 0 18px; display:none;"> 
<b>tooltip text goes here</b><br />                 
</div> 

JQuery:

$('.tooltipimage').on('mouseover',function(e) 
{ 
    e=e?e:window.event; 
    $('.tooltip').css(
    { 
     position:'absolute', 
     top:e.pageY, 
     left:e.pageX 
    }).show(); 
}).on("mouseout",function(){$('.tooltip').hide()}); 

jsFiddle: http://jsfiddle.net/vgYeR/

Я также объять MouseOut е чтобы он выглядел скорее как всплывающая подсказка.