On mouseover Может ли этот div быть прикреплен к указателю мыши, чтобы его содержимое отображалось при наведении курсора мыши?Показать DIV на MouseOver
<div id='show' style='display:none;'></div>
Если да, то как это делается?
<div onmousemove="position();" onmouseout="hide();">abc</div>
<div id="tip" style="position: fixed; visibility: hidden;">that's abc!</div>
<script type="text/javascript">
function position() {
var d = document.getElementById('tip');
d.style.visibility = 'visible';
d.style.left = event.screenX + 'px';
d.style.top = event.screenY + 'px';
}
function hide() {
document.getElementById('tip').style.visibility = 'hidden';
}
</script>
Когда пользователь Мышки над "ABC" DIV, то "это азбука!" div отображается рядом с курсором мыши (и следует за ним).
Попробуйте это:
<div id='show' onmouseover="this.style.display = 'block';"></div>
Но для того, чтобы работать, то DIV должно быть видно первым. Однако, если div является hiddne (display: none), то событие onmoueever не сможет найти div, и на нем не будет инициировано никакого события. Сказав это, попробуйте это, используя видимость.
<div id='show' onmouseover="this.style.visibility = 'visible';" onmouseout="this.style.visibility = 'hidden';"></div>
k. Можете ли вы сказать мне, что неправильно с этим кодом. var ele = document.getElementById ('show'); document.getElementById ('show'). InnerHTML = el.innerHTML; ele.width = '200px'; ele.height = '30px'; ele.bgcolor = '# a9a9a9'; ele.color = '# fff'; ele.position = 'absolute'; ele.display = 'block'; $ (window) .mouseover (функция (событие) { $ ("# show"). Css ({'top': event.pageY, 'left': event.pageX}); $ ('# show') .height(); }); – Hulk
event.screenX + 'py' должно быть event.screenY + 'px' – Mic
@Hulk: Проблема с этим кодом в том, что он неформатирован и не может быть прочитан. Более серьезно, однако, 'el' не определен, и вы смешиваете jQuery и чистый код javascript - у вас загружен jQuery? Кроме того, вызов 'height()' ничего не делает. @Mic: Спасибо; исправлено. –