在jquery hover（）之后，我的元素上没有激活css：hover

Question

在jquery悬停功能之后，css悬停不起作用。

所以，我的html中有几个svg元素。在这些svg元素上，我有jquery，如果我将鼠标悬停在底部的按钮上，所有svg元素将激活颜色变为黄色（＃b8aa85）。

与此同时，当我将鼠标悬停在svg元素本身上时，我希望这些svg元素变为白色（我用css：hover编写）。

在jquery悬停功能之后，css悬停将不起作用。

需要任何帮助！

除此之外，在脚本中我还嵌入了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>

Answer 1

您的JavaScript在元素上设置color和fill属性（与使用style属性相同。

见spec：

如果声明来自的是一个'style'属性而不是带有选择器的规则，则计数为1

这是特定的，因为您可以获得并将使用选择器覆盖任何规则集。

---

你可以用!important破解它，但这总是比它的价值更麻烦。你应该避免使用jQuery hover方法（你没有做任何与你无法用纯CSS做的事情）。