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

【问题标题】：After jquery hover(), css :hover is not ativated on my elements在 jquery hover() 之后，我的元素上没有激活 css :hover
【发布时间】：2019-08-28 15:10:42
【问题描述】：

jquery hover 功能后，css hover 不起作用。

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

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

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>

【问题讨论】：

没有 jquery 你的 css 可以工作吗？我复制了你的 sn-p 并删除了 jquery，它似乎什么也没做。然后，我将您的 css 更改为 .colony 并放回 jquery，它同时执行 jquery 和 css。总而言之：看不到问题是什么/您的 jquery 和 css 甚至没有指向同一个东西/问题标题中的前提是不正确的，因为当 css 和 jquery point 时都应用了 css 和 jquery到同一个元素.

标签： javascript jquery css hover mouseover

【解决方案1】：

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

见spec：

如果声明来自是“样式”属性而不是带有选择器的规则，则计数 1

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

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

【讨论】：