javascript - 如何将鼠标悬停在 Javascript 中的矩形上？

Question

我在屏幕上创建了一个矩形，当鼠标悬停在矩形上时，我希望在该矩形上显示一些按钮。但我无法胜任这项工作。我的代码如下。我不明白为什么

this.$('.control').removeClass('hide');

此行无效。它也不会给出任何错误。

$(this.rect).html(........................css({ position: 'absolute', padding: '10px' });

我也无法理解我的这部分代码。 (堆栈不允许 div。我不知道为什么)。

var KineticModel = Backbone.Model.extend({
    myRect: null,

    createRect : function() {
            alert("rectangle created.");
            var rect=new Kinetic.Rect({
                            x: 50,
                            y: 50,
                            width: 150,
                            height: 150,
                            fill: 'green',
                            stroke: 'black',
                            strokeWidth: 1,
                            offset: [0, 0],
                            draggable: true,
                      });
            rect.on("mouseover",function(){
                alert("Hoover : ");
                $('.control').removeClass('hide');
            });
            rect.on("mouseout",function(){
                alert("Out : ");
            });
            rect.on("mousedown",function(){
                alert("Down : ");
            });
            rect.on("mouseup",function(){
                alert("Up : ");
            });
            return rect;
        }
});

var KineticView = Backbone.View.extend({
        tagName: 'span',
        stage: null,
        layer: null,

        initialize: function (options) {
            model: options.model;
            el: options.el;
            this.layer = new Kinetic.Layer();
            this.stage = new Kinetic.Stage({ container: this.el, width: 1000, height: 500 });
            this.stage.add(this.layer);
        },
        events: {
            'click': 'spanClicked'
        },
        render: function () {
            var rect = this.model.createRect();
            $(this.rect).html('<div class="shape"/>'
             + '<div class="control delete hide"/>'
             + '<div class="control change-color hide"/>'
             + '<div class="control resize hide"/>'
             + '<div class="control rotate hide"/>').css({ position: 'absolute', padding: '10px' });
            this.layer.add(rect);
            this.stage.add(this.layer);
            alert("render");
            return this;
        },
        spanClicked: function () {
            
        }
});

var kModel = new KineticModel({});
var kView = new KineticView({ el: '#container', model: kModel });

$('#shapetest').click(function() {
    kView.render();
});

Answer 1

将 this.$('.control').removeClass('hide'); 更改为:

$('.control').removeClass('hide');

等等...