При наведении мыши изменение цвета текста и смещение

@Евгения Е · Регистрация: 20.05.2014

Студворк — интернет-сервис помощи студентам

Задание:
В документе представлен текст синим цветом. При наведении на нее мыши этот текст меняет цвет и смещается вниз и вправо, а затем возвращается на свое место.

Получилось только изменение цвета текста, как сделать смещение вниз и вправо и возвратить на место?

<html>
<head>
<title>11111</title>
<STYLE type="text/css">
div {color: blue}
</STYLE>
</head>
<body>
<div id="myColor"> <h1>Привет мир!! </h1></div>
<script language="JavaScript">
onload=function(){
var obj;
obj=document.getElementById("myColor");
obj.onmouseover=function(){this.value='s ize=3'; this.style.color='red'; };
obj.onmouseout=function(){this.value='si ze=7'; this.style.color='blue'; };
};
</script>
</body>
</html>

@Пифагор · 30.12.2016, 16:36

Если "в лоб", то так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var obj, _, __, top = 5, left = 5;
 
obj=document.getElementById("myColor");
obj.style.position = 'absolute';
obj.onmouseover = function(){
  this.value='size=3';
  this.style.color='red';
  _ = this.offsetTop + top;
  __ = this.offsetLeft + left;
  this.style.marginLeft = __ + 'px';
  this.style.marginTop = _ + 'px';
};
obj.onmouseout = function(){this.value='size=7';
 this.style.color='blue';
 this.style.marginLeft = 0;
 this.style.marginTop = 0;
};

Добавлено через 1 минуту
https://jsfiddle.net/xjtpcqx5/1/

@Евгения Е · 30.12.2016, 18:35 **[ТС]**

Ввела код, у меня ничего не работает
Синий текст вверху и всё.

Добавлено через 46 секунд
Ввела код, у меня ничего не работает
Синий текст вверху и всё.

Добавлено через 10 минут
Код заработал, но как его сместить еще больше вниз и вправо ? Меняю цифры, ничего не выходит

Добавлено через 1 минуту
Сегодня туплю, всё нашла..

Добавлено через 6 минут
А можно в программе сделать так, что при продолжении наведении курсора текст обратно на место помещался
А не то, когда мышку отпускаешь и он встает обратно?

@GuardCat · 30.12.2016, 22:32

Вообще это стоит делать через css. Но если надо js, то делать максимум css, минимум js.
пример

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<HTML>
<head>
<title>11111</title>
<style>
h1 {
  color:blue;
}
 
h1.shifted {
  position: absolute;
  top: 100px;
  left:100px;
  color: red;
}
</style>
</head>
<body>
<div id="myColor"> <h1>Привет мир!! </h1></div>
<script>
document.querySelector("h1").onmouseover = function(){
        this.classList.toggle("shifted")
};
 
 
</script>
</html>

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Евгения Е 0 / 0 / 0 Регистрация: 20.05.2014 Сообщений: 11

	При наведении мыши изменение цвета текста и смещение 30.12.2016, 15:17. Показов 14256. Ответов 3 Метки нет (Все метки) Задание: В документе представлен текст синим цветом. При наведении на нее мыши этот текст меняет цвет и смещается вниз и вправо, а затем возвращается на свое место. Получилось только изменение цвета текста, как сделать смещение вниз и вправо и возвратить на место? <html> <head> <title>11111</title> <STYLE type="text/css"> div {color: blue} </STYLE> </head> <body> <div id="myColor"> <h1>Привет мир!! </h1></div> <script language="JavaScript"> onload=function(){ var obj; obj=document.getElementById("myColor"); obj.onmouseover=function(){this.value='s ize=3'; this.style.color='red'; }; obj.onmouseout=function(){this.value='si ze=7'; this.style.color='blue'; }; }; </script> </body> </html> 0

@Евгения Е 0 / 0 / 0 Регистрация: 20.05.2014 Сообщений: 11
	30.12.2016, 18:35 [ТС]
	Ввела код, у меня ничего не работает Синий текст вверху и всё. Добавлено через 46 секунд Ввела код, у меня ничего не работает Синий текст вверху и всё. Добавлено через 10 минут Код заработал, но как его сместить еще больше вниз и вправо ? Меняю цифры, ничего не выходит Добавлено через 1 минуту Сегодня туплю, всё нашла.. Добавлено через 6 минут А можно в программе сделать так, что при продолжении наведении курсора текст обратно на место помещался А не то, когда мышку отпускаешь и он встает обратно? 0