Elly08 Ответов: 1

Как применить и удалить класс, когда mouseenter находится на другом элементе?

До сих пор мое кодирование работает только добавляя класс, когда mouseenter, но никогда не удаляет активный класс, когда mouseenter другой элемент.

Что я уже пробовал:

Проверьте мою кодировку ниже :

$(document).ready(function() {
  $("#1, #2, #3").mouseenter(function() {
	$(this).removeClass("active")
	$("#" + this.id).addClass("active");
  });
});

.active {
		background: #fff;
	}


<pre><ul>
  <li><a class="active" id="1">number 1</a></li>
  <li><a id="2">number 2</a></li>
  <li><a id="3">number 3</a></li>
</ul>



		    
                    

                    
                

                

                                    

            

            

                

                    
1 Ответов

                                            

                            
Рейтинг:
 8


                            

                                

                                    Bryian Tan
                                    
                                

                                

    Обновите скрипт, чтобы удалить все элементы формы класса перед добавлением

$(document).ready(function() {

  $("#1, #2, #3").mouseenter(function() {
    $("#1, #2, #3").removeClass();
    $("#" + this.id).addClass("active");
  });
  
});




Вот пример: Edit fiddle - JSFiddle[^]


                                

                            

                                                            

                                    

                                        Elly08
                                        
                                    

                                    
Спасибо за ответ, но это не то, что мне нужно. Я хотел, чтобы класс оставался активным даже после mouseleave, пока mouseenter не перейдет к другому элементу, а затем только к активному переключателю класса. Как это сделать?


                                

                                                            

                                    

                                        Bryian Tan
                                        
                                    

                                    
Странно :) во всяком случае, тогда вы близки, я думаю, что это должно сделать трюк


  $("#1, #2, #3").mouseenter(функция() {

$("#1, #2, #3").removeClass();

	$ ("#"+ this.id). addClass ("активный");

  });


                                

                                                            

                                    

                                        Elly08
                                        
                                    

                                    
Прибил его! Это работает. Спасибо :D


                                

                                                            

                                    

                                        Bryian Tan
                                        
                                    

                                    
Пожалуйста. Я обновил решение последним кодом и Новой ссылкой на образец кода.