Mouseleave из 2 div-ов сразу

@Radmir2015 · Регистрация: 16.04.2015

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

Когда я навожу на определенный объект появляется еще один объект, пусть это будут дивы.
Они находятся рядом друг с другом, и теперь 2-ому диву нужно пропасть, если мышка вышла и из первого дива, и из 2-го дива одновременно. Как это сделать, желательно с jq.

Общий пример (при наведении на цифры):

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="container-fluid">
  <div class="row">
    <div class="content col-md-4">
      <h2 class="text-center">Main Time</h2>
      <table class="main-table">
        <tr>
          <td colspan=2>Minutes</td>
          <td></td>
          <td colspan=2>Seconds</td>
        </tr>
        <tr>
          <td>
            <h2 class="time odd">0</h2>
          </td>
          <td>
            <h2 class="time">0</h2>
          </td>
          <td>
            <h2>:</h2>
          </td>
          <td>
            <h2 class="time odd">0</h2>
          </td>
          <td>
            <h2 class="time">0</h2>
          </td>
        </tr>
      </table>
      <div class="button-div">
        <button class="start">Start</button>
      </div>
    </div>
    <div class="content col-md-4">
      <h3 class="text-center">Main time</p>
      <div class="progress-div">
        <div class="progress"><h4>0%</h4></div>
      </div>
      <h3 class="text-center">Break time</h3>
      <div class="progress-div">
        <div class="progress"><h4>0%</h4></div>
      </div>
    </div>
    <div class="content col-md-4">
      <h2 class="text-center">Break Time</h2>
      <table class="break-table">
        <tr>
          <td colspan=2>Minutes</td>
          <td></td>
          <td colspan=2>Seconds</td>
        </tr>
        <tr>
          <td>
            <h2 class="time odd">0</h2>
          </td>
          <td>
            <h2 class="time">0</h2>
          </td>
          <td>
            <h2>:</h2>
          </td>
          <td>
            <h2 class="time odd">0</h2>
          </td>
          <td>
            <h2 class="time">0</h2>
          </td>
        </tr>
      </table>
      <div class="form">
        <input type="checkbox"/>
        <h3>Activate</h3>
      </div>
    </div>
  </div>
  <div class="window">
    <table>
      <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
      </tr>
    </table>
  </div>
</div>

CSS
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
.content {
/*   border: 2px red solid; */
  background-color: grey;
  padding: 10px;
}
 
.start {
  font-size: 20pt;
  width: 40%;
  background-color: #aaa;
}
 
.button-div {
  width: 100%;
  text-align: center;
}
 
.window {
  position: absolute;
  background-color: #bbb;
  display: none;
}
 
.window tr td:hover {
  background-color: #999;
}
 
.main-table, .break-table {
  margin: 20px auto;
}
 
.main-table td .time:hover, .break-table td .time:hover {
  background-color: #999;
}
 
table {
  border: 1px black solid;
  margin: 0 auto;
}
 
.form > * {
  display: inline;
}
 
.form {
  text-align: center;
}
 
input[type=checkbox] {
  height: 16px;
  width: 16px;
}
 
.progress-div {
  width: 100%;
  background-color: #ccc;
  margin: 20px 0;
  border-radius: 10px;
}
 
.progress {
  background-color: #555;
  width: 0%;
  height: 35px;
  border-radius: 10px;
  z-index: 2;
}
 
.progress-div > h4 {
  position: absolute;
}
 
.progress > h4 {
  margin: 0 auto;
}
 
.content table td, .window table td {
  padding: 5px;
  font-size: 20pt;
  text-align: center;
}
 
.content table tr:nth-child(2) td {
  border: 1px black solid;
}
 
td:hover {
  cursor: pointer;
}

JavaScript
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
var num;
var flag = false; // timer goes
 
$(document).ready(function(){
  $("h2.time").on("mouseenter", function(e){
    num = $(this);
    if (num.is(".odd"))
      $(".window").html("<table><tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></table>");
    else
      $(".window").html("<table><tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr></table>");
    if (e.pageX + $(".window").width() / 2 > $(window).width())
      $(".window").css({"left": ($(window).width() - $(".window").width()) + "px", "top": e.pageY + 10 + "px"});
    else
      $(".window").css({"left": Math.max(e.pageX - $(".window").width() / 2, 0) + "px", "top": e.pageY + 10 + "px"});
    
    $(".window").fadeIn();
  });
  $(".window").on("click", "td", function(){
    num.html($(this).html())
    $(".window").fadeOut();
  });
  
  var times;
  var check;
  
  function minusTime(min0, sec0, min1, sec1) {
    return min1 * 60 + sec1 - min0 * 60 - sec0;
  }
  
  function totalTime(min0, sec0) {
    return min0 * 60 + sec0;
  }
  
  function writeTime(timeArray, saveTime) {
      var tmp = $(".time");
      for (var i = 0; i < 4; i++) {
        $(".progress:first").animate({
          "width": minusTime(timeArray[0], timeArray[1], saveTime[0], saveTime[1]) / totalTime(saveTime[0], saveTime[1]) * 100 + "%",
                              }, 100);
        $(".progress:first h4")[0].innerHTML = Math.round(minusTime(timeArray[0], timeArray[1], saveTime[0], saveTime[1]) / totalTime(saveTime[0], saveTime[1]) * 100) + "%";
        $(".progress:last").animate({
          "width": minusTime(timeArray[2], timeArray[3], saveTime[2], saveTime[3]) / totalTime(saveTime[2], saveTime[3]) * 100 + "%",
                              }, 100);
        $(".progress:last h4")[0].innerHTML = Math.round(minusTime(timeArray[2], timeArray[3], saveTime[2], saveTime[3]) / totalTime(saveTime[2], saveTime[3]) * 100) + "%";
        tmp[i * 2].innerHTML = Math.floor(timeArray[i] / 10);
        tmp[i * 2 + 1].innerHTML = timeArray[i] % 10;
      }
    }
  
  var timeId, timeId1;
  
  function timer1(times, saveTime) {
      timeId = setInterval(function(){
      check = $("input[type=checkbox]").is(":checked");
      if (times[1] !== 0) { 
        times[1]--;
        writeTime(times, saveTime);
      }
      else if (times[0] !== 0) {
        times[0]--;
        times[1] = 59;
        writeTime(times, saveTime);
      }
      else if (!check) {
        writeTime(saveTime, saveTime);
        times = saveTime.slice();
      }
      else
        {
          timer2(times, saveTime);
          clearInterval(timeId);
        }
      }, 1000);
    }
    function timer2(times, saveTime) {
      timeId1 = setInterval(function(){
        if (times[3] !== 0) {
          times[3]--;
          writeTime(times, saveTime);
        }
        else if (times[2] !== 0) {
          times[2]--;
          times[3] = 59;
          writeTime(times, saveTime);
        }
        else {
          writeTime(saveTime, saveTime);
          times = saveTime.slice();
          timer1(times, saveTime);
          clearInterval(timeId1);
        }
        }, 1000);
    }
  
  var saveTime;
  
  $(".start").on("click", function(){
    if (flag) {
      $(".start").text("Start");
      clearInterval(timeId);
      clearInterval(timeId1);
      console.log(saveTime);
      writeTime(saveTime, saveTime);
    }
    else {
    var fin = [];
    var times = $(".time")
    var check;
    console.log(check);
    for (var i = 0; i < times.length; i++) {
      fin.push(+times[i].innerHTML);
    }
    times = [];
    for (var i = 0; i < fin.length / 2; i++)
    {
      times[i] = fin[i * 2] * 10 + fin[i * 2 + 1];
    }
    saveTime = times.slice();
    $(".start").text("Stop");
    timer1(times, saveTime);
    }
    flag = !flag;
  });
});

https://codepen.io/Radmir2015/... itors=1010

Второй вопрос про тот же проект и касается CSS:
У меня в таблице в ячейках лежит h2. h2 занимают не всю область из td. Как сделать при :hover именно на h2, background-color менялся у td, в котором произошел hover на h2?

@FunnyCheeze · 20.01.2018, 01:53

есть решение?

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Нашел на реддите интересную статью под названием «Кто-нибудь знает, где получить бесплатный компьютер или. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

@FunnyCheeze 0 / 0 / 0 Регистрация: 09.10.2015 Сообщений: 60
	20.01.2018, 01:53
	есть решение? 0