Home remove hover highlighting on click event
Reply: 0

remove hover highlighting on click event

piddler
1#
piddler Published in 2018-02-13 16:20:31Z

Three steps working for my table row highlighting.

  1. on hover the background is highlighted blue.(basically, to show you can highlight it)
  2. click event highlights the background row blue.
  3. click a highlighted row it un highlights.

These are working good.

The problem

When i click a highlighted row to un highlight it wont show that it's un highlighted while the mouse is hovering. Only, on mouse leave. I need it to be able to disable the hover so it can show that its un highlighted as soon as its clciked to un highlight. Trick is i only need the hover disabled only on that click. I need it to be able to hover again, and go through the same process.

HTML

<table class="superusertable" cellpadding="5" cellspacing="0">
   <tbody class="table-font">
    <tr ng-init="highlightAllRows(source)" ng-repeat="source in userData"
        ng-model="source.fromSourceID" 
        ng-class="{'sourcesSelected': source.sourcesSelected}" 
        ng-click="select(source)">
   <td width="290px">
  <div class="action-checkbox"; width="290px">{{source.fromSourceID}}
 </div>
 </td>
 </tr>
</tbody>
</table>

angular

highlight all rows sets all the rows initially highlighted.

$scope.highlightAllRows = function(item){
    item.sourcesSelected = true;
};

$scope.select = function(item) {
    item.sourcesSelected = item.sourcesSelected ? false : true;

};

CSS

.superusertable tr:hover{
background-color: #80CCFF !important;
}

is there a simple css,jquery, angular solution to disable the hover when highlighted row is clicked. I need hover to work again when you hover back

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.38671 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO