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：

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

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

您可以使用!important来解决它，但这总是麻烦多于其应有的价值。您应该避免为此使用jQuery hover方法（您没有做任何普通CSS无法做到的事情）。

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

1 个答案: