Highlight cell when hovered over

Asked
Active3 hr before
Viewed126 times

9 Answers

90%

chandoo32029Current Row & Row Mouse Hover Color.xlsm 17.2 KB Views: 51 , Current Row & Row Mouse Hover Color.xlsx 11.6 KB Views: 28 , Hi All Please note that at the Chandoo.org Forums there is Zero Tolerance to Spam Post Spam and you Will Be Deleted as a User Hui...

Pretag
 Pretag team - issue, fix, solve, resolve
88%

There are 8 cells to accept hover, each highlighting a specific group of cells on the table (no rules, just a specified list), upon hover.,I need to highlight (background-color) a sub-set of cells upon hover on a specific cell. For example, on hover over cell .row-1 .column-2 I want the following cells to highlight: .row-1 .column-2 and .row-2 .column-2, Stack Overflow Public questions & answers

Add a class of active to all column2 cells:

$('td.row-1 .column-2').hover(function() {
   $('.column-2').toggleClass('active');
});

Add a class of active to specific column2 cell:

$('.column-2').hover(function() {
   $('this').toggleClass('active');
});
load more v
72%

If you would like to post, please check out the MrExcel Message Board FAQ and register here. If you forgot your password, you can reset your password.

Private Sub Worksheet_SelectionChange(ByVal Target As Range)
Application.EnableEvents = False
Union(Target.EntireRow, Target.EntireColumn).Select
Intersect(Target.EntireRow, Target.EntireColumn).Activate
Application.EnableEvents = True
End Sub
65%

How can I get this to work in all excel spreadsheets by default?,When I hover over cell AZ651 with the rodent (mouse), can the entire column to the row be highlighted at this point as if using the Windows Start button looking for a program?,The is no move_over event for an excel worksheet so the answer is no. You could use the addin developed by Chip Pearson that highlights the row and column of the selected cell but it doesn't work by hovering, you must select the cell.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

Save the original state (eq: style) of the row and cells under the mouse., Save the original state (eq: style) of the row and cells under the mouse.,You will also see there, that I am assigning an event handler to the onMouseOut event like this:

<STYLE>
<!--
  tr { background-color: #DDDDDD}
  .initial { background-color: #DDDDDD; color:#000000 }
  .normal { background-color: #CCCCCC }
  .highlight { background-color: #8888FF }
//-->
</style>

<table border="0" cellspacing="0" bgcolor="#CCCCCC" cellpadding="0">
<tr>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Brand</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Dimensions</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Price</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Size</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Color</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>&nbsp;Type</b></td>
  <td bgcolor="#FFCC00" WIDTH="100"><b>Comment</b></td>
</tr>
<tr style="background-color:#CCCCCC;" 
  onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
  <td>Row A</td>
  <td>200x300</td>
  <td>$200,000.00</td>
  <td>small</td>
  <td>white&nbsp;</td>
  <td>good</td>
<td>2 doors</td>
</tr>
<tr 
  onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
  <td>Row B</td>
  <td>256x1000</td>
  <td>$232,300.00</td>
  <td>large</td>
  <td>yellow&nbsp;</td>
  <td>good</td>
  <td>nice</td>
</tr>
<tr class="initial" 
  onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'">
  <td>Row 3</td>
  <td>543x300</td>
  <td>$122,111.00</td>
  <td>medium</td>
  <td>yellow&nbsp;</td>
  <td>good</td>
  <td>expensive</td>
</tr>
....
load more v
40%

Posted 8 September 2017, 1:05 am EST,Replied 8 September 2017, 1:05 am EST,Posted by: kriti-kumari11 on 8 September 2017, 1:05 am EST

var oldPaintFun = GcSpread.Sheets.TextCellType.prototype.paint;
GcSpread.Sheets.TextCellType.prototype.paint = function(ctx, value, x, y, w, h, style, context) {
   var hoverRow = context.sheet.tag() && context.sheet.tag().mouseOverRow;
   if (hoverRow !== null && hoverRow === context.row) {
      style.backColor = "lightgreen";
   }
   oldPaintFun.apply(this, arguments);
}
GcSpread.Sheets.TextCellType.prototype.getHitInfo = function(x, y, cellStyle, cellRect, context) {
   return {
      x: x,
      y: y,
      cellStyle: cellStyle,
      cellRect: cellRect,
      context: context
   };
}
GcSpread.Sheets.TextCellType.prototype.processMouseEnter = function(hitInfo) {
   var sheet = hitInfo.sheet,
      row = hitInfo.context.row,
      col = hitInfo.context.col;
   sheet.tag({
      mouseOverRow: row
   });
   sheet.repaint(this._getRepaintCellRect(sheet, row));
}
GcSpread.Sheets.TextCellType.prototype.processMouseLeave = function(hitInfo) {
   var sheet = hitInfo.sheet,
      row = hitInfo.context.row,
      col = hitInfo.context.col;
   sheet.tag({
      mouseOverRow: null
   });
   sheet.repaint(this._getRepaintCellRect(sheet, row));
}
GcSpread.Sheets.TextCellType.prototype._getRepaintCellRect = function(sheet, row) {
   var viewLeftColumn = sheet.getViewportLeftColumn(1);
   var viewRightColumn = sheet.getViewportRightColumn(1);
   var rowStartCellRect = sheet.getCellRect(row, viewLeftColumn);
   var rowEndCellRect = sheet.getCellRect(row, viewRightColumn);
   return new GcSpread.Sheets.Rect(rowStartCellRect.x, rowStartCellRect.y, rowEndCellRect.x - rowStartCellRect.x + rowEndCellRect.width, rowEndCellRect.height);
}
window.onload = function() {
   var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
   var sheet = spread.getActiveSheet();
   sheet.getCells(0, 0, 3, 3).backColor("yellow");
}
load more v
22%

Wordfence is a security plugin installed on over 4 million WordPress sites. The owner of this site is using Wordfence to manage access to their site.,If you think you have been blocked in error, contact the owner of this site for assistance.,If you are a WordPress user with administrative privileges on this site, please enter your email address in the box below and click "Send". You will then receive an email that helps you regain access.

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Pretag
 Pretag team - issue, fix, solve, resolve
48%

The background color of this paragraph should turn to green when the mouse pointer hovers either its text (here) or its whitespace background, here:,NOTE: User interaction is required for this test.

p: hover {
   background - color: lime
}
a: hover {
   background - color: lime
}

tr: hover {
   background - color: green
}
td: hover {
   background - color: lime
}

table {
   border - spacing: 5 px;
}
load more v

Other "undefined-undefined" queries related to "Highlight cell when hovered over"