AngularJS: show hide elements based on mouse events

问题

Here is an example - http://plnkr.co/edit/iwvjJcUurUW2AvkDArfz?p=preview

I would like the delete button to show up only when mouse hovers on the row and perform some function delete(name), by passing the name

How can I achieve this?

P.S I am new to Angular world

回答1:

This can be quickly solved with CSS, no need to bring JS or Angular. Just using basic CSS would be in my opinion better solution. Add the following to your stylesheet:

 <style>
   tr i.icon-minus-sign { display: none; }
   tr:hover i.icon-minus-sign { display: block; };
 </style>

回答2:

Andres answer is great, but I think many people who stumble upon this page will appreciate this variation:

 <style>
   tr i.icon-minus-sign { visibility: hidden; }
   tr:hover i.icon-minus-sign { visibility: visible; };
 </style>

This is better in many cases, because when using visibility:hidden, the element is still there but just invisible, so it takes up space even when it's not shown. That's why the table and cells will not change size when hovering over the row.

来源：https://stackoverflow.com/questions/16535383/angularjs-show-hide-elements-based-on-mouse-events