После jquery hover () css: hover не активируется на моих элементах - PullRequest
Новая
       67

После jquery hover () css: hover не активируется на моих элементах

1 голос
/ 07 апреля 2019

После jquery hover функция css hover не работает.

Итак, у меня есть несколько элементов SVG в моем HTML. На этих элементах svg у меня есть jquery, что если я наведу курсор на кнопку внизу, все элементы svg активируют изменение цветов на желтый (# b8aa85).

В то же время я хочу, чтобы эти элементы svg изменили на белый (что я написал с помощью css: hover), когда я наведу курсор на сам элемент svg.

После jquery hover функция css hover работать не будет.

Нужна любая помощь!

Кроме того, в скрипт я также вставил плагин Panzoom. Возможно ли, что они терпят крах? 

$(document).ready(function() {


  $(".button").hover(
    function() {
      //mouse over
      $(this).css('color', '#b8aa85');
      $(".col").css('fill', '#b8aa85');
    },
    function() {
      //mouse out
      $(".col").css('fill', "#000000");
      $(this).css('color', "#000000");

    });
});
.col {
  fill: "#000000"
}

.col:hover {
  fill: white;
  transition: 0.8s;
  cursor: pointer;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<g id="colony_projects">
  <circle class="col" cx="618" cy="411.2" r="4.1" />
  <circle class="col" cx="666.8" cy="274.8" r="4.1" />
  <circle class="col" cx="578.2" cy="493.3" r="4.1" />
  <circle class="col" cx="577.7" cy="345.2" r="4.1" />
  <circle class="col" cx="433.8" cy="250.3" r="4.1" />
  <circle class="col" cx="339.4" cy="464.1" r="4.1" />
  <circle class="col" cx="658.5" cy="533.4" r="4.1" />
  <circle class="col" cx="540.3" cy="451.6" r="4.1" />
</g>

<div class="colony">
  <div class="button">&#11044;</div>
</div>

1 Ответ

0 голосов
/ 07 апреля 2019

Ваш JavaScript устанавливает свойства color и fill для элемента (что аналогично использованию атрибута style .

См. spec :

count 1, если декларация от - это атрибут 'style', а не правило с селектором

Это специфичнокак вы можете получить и переопределит любой набор правил с помощью селектора.

Вы можете взломать его с помощью !important, но это всегда больше проблем, чем стоит. Вам следует избегать использования jQuery hover метод для этого (вы ничего не делаете с этим, что вы не можете сделать с простым CSS).

...