Мне нужно изменить класс #hse div при наведении курсора на ссылку и вернуться к классу по умолчанию при наведении мыши. Ссылке был присвоен идентификатор "#hselink". Я поместил скрипт ниже в заголовок WP, но он не работает. (Сайт не доступен для просмотра.)

Я пробовал искать здесь, используя предоставленные скрипты, и div не меняется.

<a href="#" id="hselink">Health, Safety &amp; The Environment</a>

<script>
$("#hselink").mouseover(function(){
  $("#hse").addClass("boxshadow").removeClass("noshadow")
})
</script>

0
adrian collins 17 Апр 2019 в 20:18

2 ответа

Лучший ответ

Вы можете упростить свой процесс, установив стиль без тени в качестве стиля по умолчанию для div, а затем просто переключив класс boxshadow.

<script>
jQuery(document).ready(function(){
    jQuery(document).on("mouseover", "#hselink", function(){
        jQuery("#hse").toggleClass("boxshadow");
    });
});
</script>
0
imvain2 17 Апр 2019 в 18:13

Вы можете прикрепить событие mouseenter и mouseleave, которые переворачивают друг друга.

$('#hselink')
  .on('mouseenter', function(){
    $('#hse').addClass('boxshadow').removeClass('noshadow');
  })
  .on('mouseleave', function(){
    $('#hse').removeClass('boxshadow').addClass('noshadow');
  });
.noshadow { color: blue; }
.boxshadow { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="hselink">Health, Safety &amp; The Environment</a>
<div id="hse" class="noshadow">Toggle Me</div>
0
Taplar 17 Апр 2019 в 17:33