Блог

Главная - Вопросы по программированию - Как добавить наведение курсора мыши в li после нажатия на li с помощью jquery?

Как добавить наведение курсора мыши в li после нажатия на li с помощью jquery?

#javascript #jquery #css

Вопрос:

Я запускаю программу. Я получил первый эффект наведения в каждом элементе li. После этого я нажал на один ли, а затем изменил цвет его границы на красный. После этого мой эффект наведения li не работает.

После того, как я добавил еще один ul в существующий код. Затем я нажал li первого ul, а после этого я нажал li 2-го ul. Как я могу активировать как li первого, так и второго ul?

 $("#id_of_ul").on("click", "li", function () {
  $(this).toggleClass("active").siblings(".active").removeClass("active");;
});
$("#id_of_ul1").on("click", "li", function () {
  $(this).toggleClass("active").siblings(".active").removeClass("active");;
}); 
     ul li:hover {
  border-color: #cc4e00
}

.result_hover {
  border-color: #cc4e00;
}

.cls {
  height: 50px;
  border: 1px solid;
  border-color: rgb(226, 226, 226);
}

li.active {
 border-color: #cc4e00;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="mt-1 mb-0" id="id_of_ul">
    <li id="a1" class="cls">
      <span class="spnCls" id="spn_a1"><img src="img" alt="" class="img-fluid"></span>
      <label>1</label>
    </li>
    <li id="a2" class="cls">
      <span class="spnCls" id="spn_a2"><img src="img" alt="" class="img-fluid"></span>
      <label>2</label>
    </li>
    <li id="a3" class="cls">
      <span class="spnCls" id="spn_a3"><img src="img" alt="" class="img-fluid"></span>
      <label>3</label>
    </li>
    <li id="a4" class="cls">
      <span class="spnCls" id="spn_a4"><img src="img" alt="" class="img-fluid"></span>
      <label>4</label>
    </li>
  </ul>
<ul class="mt-1 mb-0" id="id_of_ul1">
        <li id="a11" class="cls">
          <span class="spnCls" id="spn_a11"><img src="img" alt="" class="img-fluid"></span>
          <label>1</label>
        </li>
        <li id="a12" class="cls">
          <span class="spnCls" id="spn_a12"><img src="img" alt="" class="img-fluid"></span>
          <label>2</label>
        </li>
        <li id="a13" class="cls">
          <span class="spnCls" id="spn_a13"><img src="img" alt="" class="img-fluid"></span>
          <label>3</label>
        </li>
        <li id="a14" class="cls">
          <span class="spnCls" id="spn_a14"><img src="img" alt="" class="img-fluid"></span>
          <label>4</label>
        </li>
      </ul>
</div>

Комментарии:

1. Проблема заключается в том, что при использовании css() применяется стиль к элементу с использованием встроенного style атрибута, который переопределяет любые правила из внешней таблицы стилей. То, как именно вы преодолеете это в вашей ситуации, зависит от вашего варианта использования. Если вам нужен конкретный пример, пожалуйста, добавьте более полный пример JS, а также соответствующий HTML.

2. Я добавил свою полную программу,html,css и js

3. Просто добавьте класс…. не стилизуйте элементы напрямую при нажатии, добавьте выбранный класс, удалите выбранный класс из других элементов

4. ДА. Это работает на меня. Спасибо за вашу поддержку.

Ответ №1:

Установка цвета непосредственно на элементе уничтожит CSS из-за специфичности.

Просто переключите класс на элемент, который был нажат.

 $("#id_of_ul").on("click", "li", function () {
  $(this).toggleClass("active").siblings(".active").removeClass("active");;
}); 
 ul li:hover {
  border-color: #cc4e00
}

.result_hover {
  border-color: #cc4e00;
}

.cls {
  height: 50px;
  border: 1px solid;
  border-color: rgb(226, 226, 226);
}

li.active {
 border-color: #cc4e00;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="mt-1 mb-0" id="id_of_ul">
    <li id="a1" class="cls">
      <span class="spnCls" id="spn_a1"><img src="img" alt="" class="img-fluid"></span>
      <label>1</label>
    </li>
    <li id="a2" class="cls">
      <span class="spnCls" id="spn_a2"><img src="img" alt="" class="img-fluid"></span>
      <label>2</label>
    </li>
    <li id="a3" class="cls">
      <span class="spnCls" id="spn_a3"><img src="img" alt="" class="img-fluid"></span>
      <label>3</label>
    </li>
    <li id="a4" class="cls">
      <span class="spnCls" id="spn_a4"><img src="img" alt="" class="img-fluid"></span>
      <label>4</label>
    </li>
  </ul>
</div>
Метки: