Javascript-форум - Решение задач по JQuery, JS, HTML и CSS

Здравствуйте! По интернету я уже довольно долго ищу помощь по своему не очень удобному вопросу. У меня есть довольно старые задачи по JQuery, которые мне тяжело решить толково. Очень рассчитываю на местную помощь, критику, советы и поправки, я все принимаю :help: :help: .
Итак:
1. jQuery модель событий.
1) Напишите обработчик события, который делает следующее. При клике мышью на любом из названий мотоциклов в этом блоке:
<ol id="moto_models">
<li>Харлей Дэвидсон</li>
<li>Кроссовый мотоцикл</li>
<li>Гоночный мотоцикл</li>
<li>Концептуальный мотоцикл</li>
</ol>
У Вас в таблице с id="moto_table" должна появляться новая строчка, в которой плавно появляется текст из элемента, по которому кликнули.
2) Вам нужно написать обработчик события, который будет подсвечивать строку таблицы (id="moto_table"), на которую навели курсор мыши вот таким цветом: #1F233C, а текст будет делать белым.
Подсказка: если нет идей, как решить данную задачу, то повторите урок «Функции css()».

Код здесь у меня вышел так:

ФАЙЛ HTML

<!DOCTYPE html>
<html>

<head>
  <title> Практическая работа № 16 (1) </title>
  <script="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style type="text/css">
      .color_table th,
      #first_tr
    </style>
</head>

<body>
  <ol id="moto_models">
    <li>Харлей Дэвидсон</li>
    <li>Кроссовый мотоцикл</li>
    <li>Гоночный мотоцикл</li>
    <li>Концептуальный мотоцикл</li>
  </ol>

  <table border='1' id="moto_table" style="display:none;" class="color_table">
    <tr>
      <th>Таблица</th>
    </tr>
  </table>

  <script src="script.js">
  </script>

</body>

</html>

ФАЙЛ JS:

$('ol li:nth-child(4)').css({
    'color': 'blue'
});
$("#moto_table").show(1500);
$('th').hover(function() {
    $('th').css("background-color", "#1F233C");
    $('th').css("color", "#FFFFFF");
}, function() {
    $('th').css("background-color", "#FFFFFF");
    $('th').css("color", "#000000");
});
jQuery("#moto_models li").click(function() {
    var t = $(this)[0].innerText;
    $("#moto_table").append("<tr><td>" + t + "</td></tr>");
    $('tr td:last').hide(0).show(1000);
    $(".color_table tr:not(#first_tr)").addClass("colors");
    $(".colors:last").css("background-color", "#FF0000");
    var tr_clr = $(".colors:last").css("background-color");
    $(".colors:last").css("background-color", "white");
    $(".colors").hover(function() {
        if ($(this).css("background-color") != tr_clr) $(this).css("background-color", "#1F233C")
    }, function() {
        if ($(this).css("background-color") != tr_clr) $(this).css("background-color", "white")
    });
    $(".color_table tr:not(#first_tr)").addClass("texts");
    $(".texts:last").css("color", "#FF0000");
    var txt_clr = $(".texts:last").css("color");
    $(".texts:last").css("color", "black");
    $(".texts").hover(function() {
        if ($(this).css("color") != txt_clr) $(this).css("color", "white")
    }, function() {
        if ($(this).css("color") != txt_clr) $(this).css("color", "black")
    });
});

Здесь в принципе все было хорошо, но если у вас есть слова насчет этого кода (улучшения, сокращения, критика и т.п.), то буду очень рада услышать.
П. С. Можете не обращать внимание на первую строку JS-кода. Она чисто для теста и к заданию пока что отношения не имеет.

2. jQuery события hover() и toggle(). Перед вами стоит 2 задачи:
1. С помощью события hover() и функции css() сделайте так, чтобы при наведении на кнопку "Отправить заявку", ее свойства менялись:
а. Фоновый цвет должен меняться на #32375D.
б. Цвет текста на белый.
Когда же курсор мыши убирается с элемента, то все должно возвратиться на свои места.
2. С помощью toggle() сделайте так, чтобы при первом щелчке строка таблицы подсвечивалась, а при повторном принимала обычное положение (здесь уже css() использовать не обязательно, можете использовать классы).

Код преобразовался следующим образом:

ФАЙЛ HTML

<!DOCTYPE html>
<html>

<head>
  <title> Практическая работа № 16 (1) </title>
  <script="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style type="text/css">
      .color_table th,
      #first_tr,
      .button
    </style>
    <style>
      .sting_flash {
        background-color: yellow;
      }
    </style>

</head>

<body>
  <ol id="moto_models">
    <li>Харлей Дэвидсон</li>
    <li>Кроссовый мотоцикл</li>
    <li>Гоночный мотоцикл</li>
    <li>Концептуальный мотоцикл</li>
  </ol>

  <button class="button">
    Отправить заявку
  </button>

  <p></p>


  <table border='1' id="moto_table" style="display:none;" class="color_table">
    <tr>
      <th>Таблица</th>
    </tr>
  </table>

  <script src="script.js">
  </script>

</body>

</html>

ФАЙЛ JS:

$('ol li:nth-child(4)').css({
    'color': 'blue'
});
$("#moto_table").show(1500);
$('th').hover(function() {
    $('th').css("background-color", "#32375D");
    $('th').css("color", "#FFFFFF");
}, function() {
    $('th').css("background-color", "#FFFFFF");
    $('th').css("color", "#000000");
});
$('button').hover(function() {
    $(this).css("background-color", "#32375D");
    $(this).css("color", "#FFFFFF");
}, function() {
    $(this).css("background-color", "#FFFFFF");
    $(this).css("color", "#000000");
});
jQuery("#moto_models li").click(function() {
    var t = $(this)[0].innerText;
    $("#moto_table").append("<tr><td>" + t + "</td></tr>");
    $('tr td:last').hide(0).show(1000);
    $(".color_table tr:not(#first_tr)").addClass("colors");
    $(".colors:last").css("background-color", "#FF0000");
    var tr_clr = $(".colors:last").css("background-color");
    $(".colors:last").css("background-color", "white");
    $(".colors").hover(function() {
        if ($(this).css("background-color") != tr_clr) $(this).css("background-color", "#1F233C")
    }, function() {
        if ($(this).css("background-color") != tr_clr) $(this).css("background-color", "white")
    });
    $(".color_table tr:not(#first_tr)").addClass("texts");
    $(".texts:last").css("color", "#FF0000");
    var txt_clr = $(".texts:last").css("color");
    $(".texts:last").css("color", "black");
    $(".texts").hover(function() {
        if ($(this).css("color") != txt_clr) $(this).css("color", "white")
    }, function() {
        if ($(this).css("color") != txt_clr) $(this).css("color", "black")
    });
});
var flashing = document.getElementById('moto_table');
flashing.addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName === 'TD') {
        target.classList.toggle('sting_flash');
    }
}, false);

А здесь у меня возникли уже серьезные недомогания. Опять же, можно сказать, что все работает по условиям задания, но это не совсем так. С условием "Когда же курсор мыши убирается с элемента, то все должно возвратиться на свои места" я не смогла справиться, так как не понимаю, как правильно отменить эффект hover'а здесь. Мне нужно именно вернуть кнопку в исходное положение, а не преобразовать ее как-то иначе, то есть после того, как сработал hover, мне нужно, чтобы кнопка вернулась в состояние по умолчанию. По условиям желательно бы, чтобы это было осуществлено так же в файле скрипта JS.
Далее идет toggle. Честно, я боюсь нарушать построение функций и с условием toggle'а я дольше всего боролась, но это все, что я смогла понять и сделать. Здесь нет JQuery, но должен быть. Плюс подсветку таблицы желательно бы сделать плавной и именно светящейся, хотя я вообще не понимаю, как в такую функцию можно встроить эти миллисекунды.

3. Понятие объекта события.
Вам надо написать скрипт, который делает следующее. При щелчке на любом из наших 4-х мотоциклов, вокруг него должна появляться сплошная рамка в 4px.
При этом, если в момент щелчка мышью по мотоциклу была зажата клавиша shift, то цвет рамки должен быть #cc0000, а если не была зажата то цвет рамки должен быть #333333.
При повторном щелчке по тому же самому мотоциклу рамка должна исчезать.

Я сделала в этой части довольно мало, ну практически ничего, так как рамки проблемные вышли - click в css им не подходит, focus им не нравится, а active просто работает иначе.
Здесь также важно, чтобы зафиксированный на пункте li клик мог переходить на другой пункт, то есть, когда я нажимаю уже иной пункт li, рамка переходит на него, исчезая с предыдущего нажатого пункта. Здесь появляется недочет в виде того, что при повторном нажатии на пункт в таблице опять появится эта надпись, поэтому если есть возможность это исправить, то скажите, а если нет, то ничего страшного. И так можно оставить.
С клавишами я пока что молчу - абсолютно не знакомая для меня тема.

Возможно, слишком многое спрашиваю для новичка на форуме и может быть это не такие уж и сложные задачи, за что извиняюсь, но мне больше некуда нормально обратиться. Я а так не очень хорошо разбираюсь с html и css, JS для меня очень и очень слабо раскрыт, так что о jQuery даже страшно говорить. Как я уже говорила, для меня любые советы, критика, пояснения или поправки могут помочь. Надеюсь, успею получить что-нибудь в ближайшие дни. Заранее спасибо всем, кто заметил мою тему :thanks: :thanks: .

П. С. И совсем забыла сказать -сайты не должны использовать никакие веб-ресурсы и ссылки, т. е. короче работать только между файлами.