Question

I am trying to get a view to become visible when a user scrolls over it, but I am having trouble.
Here is the View:

events: {
  "mouseenter": "showOptions",
  "mouseleave": "hideOptions",
},

showOptions: function() {
  $(this.el).find(".update-delete").addClass("visible");
},

hideOptions: function() {
  $(this.el).find(".update-delete").removeClass("visible");
},

Here is the relevant CSS:

.update-delete {
  display: inline-block;
  margin-left: 5px;
  font-weight: bold;
  color: #777777;
  visibility: hidden;
}

.visibile {
  visibility: visible;
}

The class is originally set to have a visibility as hidden. On hover, the visibility doesn’t change, though.

Answer 1

I’d get rid of the visibility css and use display and $.show/hide instead:

.update-delete {
  display: inline-block;
  margin-left: 5px;
  font-weight: bold;
  color: #777777;
  display: none;
}

showOptions: function() {
  $(this.el).find(".update-delete").show()
},

hideOptions: function() {
  $(this.el).find(".update-delete").hide();
},

If you must you visibility, try the following first:

showOptions: function() {
  $(this.el).find(".update-delete").css('visibility', 'visible');
},

hideOptions: function() {
  $(this.el).find(".update-delete").css('visibility', 'hidden');
},

If that works it should be simple to adapt to your code.