Ad

After Jquery Hover(), Css :hover Is Not Ativated On My Elements

- 1 answer

After jquery hover function, css hover does not work.

So, I have several svg elements in my html. On these svg elements, I have jquery that if I hover into a button on the bottom all the svg elements will activate the colors to change into yellow (#b8aa85).

At the same time, I want these svg elements to change to white (which I wrote this with css:hover) when I hover onto the svg element itself.

After jquery hover function, the css hover will not work.

Any help needed!

Besides this, in the script I also embed panzoom plugin. is it possible that they crash?

$(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>

Ad

Answer

Your JavaScript sets the color and fill properties on the element (which is the same as using a styleattribute.

See the spec:

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

This is specific as you can get and will override any ruleset with a selector.


You can hack around it with !important, but that is always more trouble than it is worth. You should avoid using the jQuery hover method for this (you aren't doing anything with it that you can't do with plain CSS).

Ad
source: stackoverflow.com
Ad