Как работать, JavaScript функционируют во время наведения мыши на отделении
Как я могу заставить функцию JavaScript работать когда пользовательские мыши по тегу Div?
Вот мой тег Div:
<div id="sub1 sub2 sub3">some text</div>
6 ответов
Я предполагаю, что вы хотите отобразить приветствие при наведении курсора мыши на "какой-нибудь текст".
В качестве сообщения это будет:
<div id="sub1" onmouseover="javascript:alert('Welcome!');">some text</div>
В качестве подсказки, это должно быть:
<div id="sub1" title="Welcome!">some text</div>
В качестве нового div, вы можете использовать:
<div id="sub1" onmouseover="javascript:var mydiv = document.createElement('div'); mydiv.height = 100; mydiv.width = 100; mydiv.zindex = 1000; mydiv.innerHTML = 'Welcome!'; mydiv.position = 'absolute'; mydiv.top = 0; mydiv.left = 0;">some text</div>
Вы НИКОГДА не должны содержать пробелов в id элемента.
Это плохо сформированный HTML. Нужно либо иметь один id, либо разделенные пробелами классы. В любом случае, если вы новичок, я бы изучил jQuery.
<div id="sub1">some text</div>
или
<div class="sub1 sub2 sub3">some text</div>
Если бы у вас был следующий HTML:
<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Some welcome message</div>
jQuery
$(document).ready(function() {
$('#sub1').hover(
function() { $('#welcome').show(); },
function() { $('#welcome').hide(); }
);
});
Javascript
вы, вероятно, захотели бы включить события на вашем html:
<div id="sub1" onmouseover="showWelcome();" onmouseout="hideWelcome();">some text</div>
тогда ваш javascript имел бы эти две функции
function showWelcome()
{
var welcome = document.getElementById('welcome');
welcome.style.display = 'block';
}
function hideWelcome()
{
var welcome = document.getElementById('welcome');
welcome.style.display = 'none';
}
Пожалуйста, обратите внимание: этот javascript не принимает во внимание проблемы кросс-браузера. Для этого вам нужно будет подробно рассказать о вашем коде, просто еще одна причина использовать jquery.
<div onmouseover='alert("welcome")' id="sub1 sub2 sub3">some text</div>
Или что-то вроде этого
Вот решение jQuery.
<script type="text/javascript" src="/path/to/your/copy/of/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sub1").mouseover(function() {
$("#welcome").toggle();
});
});
</script>
Используя эту разметку:
<div id="sub1">some text</div>
<div id="welcome" style="display:none;">Welcome message</div>
Вы на самом деле не указали, хотите ли Вы (или когда) скрыть приветственное сообщение, но это будет переключать скрытие или показ каждый раз, когда Вы муссируете над текстом.
.] Используя атрибут заголовка: [
] [<div id="sub1 sub2 sub3" title="some text on mouse over">some text</div>
] прототип [] путь [] [
] [<div id="sub1" title="some text on mouse over">some text</div>
<script type="text/javascript">//<![CDATA[
$("sub1").observe("mouseover", function() {
alert(this.readAttribute("title"));
});
//]]></script>
] включить Прототип Либ для тестирования [
] [<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>