在 jquery over() 之后，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：

count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector

这是您可以获得的特定内容，并且会使用选择器覆盖任何规则集。

您可以使用 !important 破解它，但这总是比它值得的麻烦。你应该避免为此使用 jQuery hover 方法（你没有用它做任何你不能用普通 CSS 做的事情）。

在 jquery over() 之后，css :hover 没有在我的元素上激活

After jquery hover(), css :hover is not ativated on my elements

javascript

jquery

css

hover

mouseover