Вы назначая mouseover свойство элемента в true в каждом, если заявление. Это успешно и соответствует равенству true, поэтому выполняется инструкция if. Вы не можете проверить свойство элемента mouseover, потому что это не часть DOM для элементов.
Самый простой способ сделать то, что вы хотите изменить ваш CSS-х p.font2 к p.font1:hover
Однако, если вы пытаетесь узнать о запуска функции JavaScript с наведении курсора попробуйте передать аргумент this функции OnMouseOver, IE Q4(this). Затем функция может ссылаться на элемент, который был обработан более прямым.
<html><head>
<style>
p.font1 {
color: blue;
white-space: nowrap;
display: inline-block;
}
p.font2 {
color: #2E2E2E;
white-space: nowrap;
display: inline-block;
}
</style>
<script>
function Q4(element)
{
element.className='font2';
}
</script>
</head>
<body>
<p class="font1" id="change4_1" onmouseover="Q4(this)"> Menu1</p>
<p class="font1" id="change4_2" onmouseover="Q4(this)"> Menu2</p>
<p class="font1" id="change4_3" onmouseover="Q4(this)"> Menu3</p>
</body>
</html>
Это не изменит стиль обратно на мышь из хотя. Вы тоже можете легко написать этот атрибут.
Так что сводится к одной строке кода, вы можете просто изменить его на onmouseover="this.className='font2';"
Большинство людей добавляющих обработчики событий JavaScript ветер, используя нечто вроде jQuery, чтобы помочь им держать сценарий отдельно от разметки (КСС только :hover селектор делает тоже). Я показал, что here и ниже:
<html><head>
<style>
p.font1 {
color: blue;
white-space: nowrap;
display: inline-block;
}
p.font2 {
color:#2E2E2E;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$("p.font1").on({
"mouseover": function() {
console.log("hovered!");
var elem = $(this);
elem.addClass("font2");
},
"mouseout": function() {
console.log("unhovered!");
var elem = $(this);
elem.removeClass("font2");
}
});
});
</script>
</head>
<body>
<p class="font1" id="change4_1"> Menu1</p>
<p class="font1" id="change4_2"> Menu2</p>
<p class="font1" id="change4_3"> Menu3</p>
</body>
</html>
Что это, кроме загрузки библиотеки JQuery и привязки его к $, есть, когда документ загружен и готов, он выбирает все элементы типа p с классом font1 и добавляет к ним функции обработчика событий для события mouseover и mouseout. Эти функции, в свою очередь, регистрируются на консоли JavaScript при запуске (полезно, когда вы отлаживаете часть своей работы), получите ссылочный элемент, на котором было инициировано событие, а затем добавьте или удалите имя класса для атрибута класса элементов. Таким образом, вы увидите изменение класса тега p от "font1" до "font1 font2" и обратно. Вот почему font2 css изменяется только для переопределения специально измененного цвета.
Надеюсь, это лучше объяснит, что происходило в вашем примере, и что с этим делать.
@TGreenwood Если вы внимательно прочитали мой ответ, я также добавил ответ на javascript. Если вам нужно добавить класс, используйте первый подход, если вы просто хотите стирать при наведении, используйте подход CSS – Tushar
Я не понимаю. 'if (NAME1.mouseover == true)' будет возвращать значение свойства 'mouseover' на' NAME1', что отличается от вопроса о том, является ли элемент NAME1 элементом, который мышь наложила. –
@torazaburo Проверьте обновление в ответ – Tushar