在鼠标进入和离开 canvas 形状时添加和删除类

Question

我试图在鼠标悬停在某个元素上时向该元素添加 class，然后在鼠标离开时将其移除。它目前仅适用于在 js 中为其提供直接样式。

如下所示，我尝试了各种方法来做到这一点，但都遇到了一些问题。只有直接的样式更改才有效。在鼠标离开时，我做同样的事情，但删除 class。鼠标悬停并离开检查 canvas 元素。

poly.on('mouseover', function () {
                this.opacity(1);
                layer.draw();
                $('.' + this.name()).css({ backgroundColor: "#ffcc00" });
                //$('.' + this.name()).classList.add("textboxhighlight"); 
                //$('.' + this.name()).className += " textboxhighlight";  
                //$('.' + this.name()).addClass("textboxhighlight"); 
                //$('.' + this.name()).setAttribute("class", "textboxhighlight"); 
            });

我不确定问题出在哪里，因为我厌倦了添加 class 所有这些问题的各种方法。仅使用 this.addClass 是行不通的，因为它需要以 $('.' + this.name()) 开头，否则代码中的任何内容都不起作用，甚至不强制样式部分。 $('.' + this.name()) 引用元素中与 poly.

同名的 class 名称

在css中：

.textboxhighlight {
    background-color: #ffcc00;
}

感谢您的帮助。

Answer 1

如果您提供更多的代码来使用会更容易。下面的示例将说明如何在悬停时添加 class 并在离开元素时删除 class。

$('#element').hover(function(e) {
  $(this).addClass('selected');
}, function(a) {
  $(this).removeClass('selected');
});

.selected {
  background-color: green;
}

<div id='element'>
  element
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

当您不显示代码的 mouseenter/leave 部分时，很难说您的代码有什么问题。但这里有一个类的例子： https://codepen.io/andeersg/pen/MOGqPQ

$('.el').mouseenter(function() {
  $(this).addClass('el-hover');
});
$('.el').mouseleave(function() {
  $(this).removeClass('el-hover');
});

Answer 3

可能您必须在 css class background-color: #red !important 中使用。请参阅工作示例 here

Answer 4

您可以在悬停事件上使用 toggleClass

$(".hoverclass").hover(function () {
    $(this).toggleClass("hoverclass_toggle");
});

 .hoverclass {
     height: 72px;
     width: 100%;
     border: 1px solid #000;
 }
 .hoverclass_toggle {
     background-color: #000;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
    <div class="item">
        <div id="item1"> <i class="icon"></i>Test</div>
    </div>
    <div>

否则你可以做那个类型:

$(".hoverclass").hover(
  function () {
    $(this).addClass("result_hover");
  },
  function () {
    $(this).removeClass("result_hover");
  }
);

 .hoverclass {
    height: 72px;
    width: 100%;
    border: 1px solid #000;
  }
  .result_hover {
    background-color: #000;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverclass">
  <div class="item">
    <div id="item1">
      <i class="icon"></i>Test
    </div>
  </div>
<div>

在鼠标进入和离开 canvas 形状时添加和删除类

Adding and removing classes on mouse enter and leave on canvas shape

javascript

jquery

css

canvas

konvajs

在鼠标进入和离开 canvas 形状时添加和删除 类

Adding and removing classes on mouse enter and leave on canvas shape

javascript

jquery

css

canvas

konvajs

在鼠标进入和离开 canvas 形状时添加和删除类