How can I eliminate the hover effect on this one row?

Here's my code:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Table Dilemma</title>
</head>

<style>

body {
	font-family:Arial;
	font-size:10pt;
}

table.code {
	width:100%;
	height:auto;
	background-color:#ffffff;
	font-size:10pt;
}

.code td {
	border: 1px solid #d7d4d4;
	padding:5px;
}

.code tr:hover {background-color:#cccccc;}

.code th {
	background-color:#000000;
	color:#ffffff;
	font-weight:normal;
	height:35px;
}

.code_title th:hover {
	background-color:#000000;
}

</style>

<table class="code">
	<tr>
		<th style="border-top-left-radius:10pt;">#</th>
		<th>&#10004; </th>
		<th style="border-top-right-radius:10pt;">task / notes</th>
	</tr>
	<tr>
		<td>1</td>
		<td>&#10004; </td>
		<td>add PrimaryID column to all relevant tables (click <a href="#addColumn">here</a> to see that code)</td>
	</tr>
	<tr>
		<td>2</td>
		<td>&#10004;</td>
		<td>update those same tables with the appropriate PrimaryID (click <a href="#addColumn">here</a> to see that code)</td>
	</tr>
	<tr>
		<td>3</td>
		<td>&#10004;</td>
		<td>update search functionality to inlcude PrimaryID so it's being carried over to appropriate pages (main_personnel_search-rsults.php [primary_includes->clinical_group->processors])</td>
	</tr>
	<tr class="code_syntax">
		<td colspan="3">line #47: $sql = "SELECT personnel.Id, personnel.EId, personnel.Lname, personnel.Fname, personnel.Title, personnel.Doh, personnel.ProcessLevel, personnel.DeptCode, personnel.Active,
		
line #58: $PrimaryID=$row['Id'];
		
line #70: 	.'&lt;td&gt;&lt;a href = "#" class = "pers_med_record" data-toggle="control-sidebar" data-id = "'.$EId.'" data-primary_id="'.$PrimaryID.'"&gt;'.$PrimaryID.'&lt;/a&gt;&lt;/td&gt;'</td>
	</tr>
</table>

</body>

</html>

Open in new window


I want to have the row with the class "code_syntax" not have the "hover" dynamic attached to it. Right now, when you hover over every row, you get the grey background. I don't want that where I've got the code. I've tried to get this to work, but I'm missing something.

What am I doing wrong?
brucegustPHP DeveloperAsked:
Who is Participating?
 
Jim RiddlesPrepress/OMS SpecialistCommented:
Change line 26 of your example to the following:
.code tr:not(.code_syntax):hover {background-color:#cccccc;}

Open in new window

1
 
mohan singhWeb developerCommented:
This is complete Hover effect for your each row

I hope Like  and change your color what you want
<!DOCTYPE html>
<html>
<head> 
<style style="text/css">
  	.hoverTable{
		width:100%; 
		border-collapse:collapse; 
	}
	.hoverTable td{ 
		padding:7px; border:#4e95f4 1px solid;
	}
	/* Define the default color for all the table rows */
	.hoverTable tr{
		background: #b8d1f3;
	}
	/* Define the hover highlight color for the table row */
    .hoverTable tr:hover {
          background-color: #ffff99;
    }
</style>


</head>
<body>

<table class="hoverTable">
	<tr>
		<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
	</tr>
	<tr>
		<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
	</tr>
	<tr>
		<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
	</tr>
</table>


</body>
</html>

Open in new window

Thank You

Mohan Singh
0
 
brucegustPHP DeveloperAuthor Commented:
Thank you, gentlemen!

Jim, this is one of the reasons why I appreciate EE so much is because unless you know to google "NOT," it's almost impossible to find your answer.

Mohan, unless I missed something, you didn't reference anything about hovering every row EXCEPT for one. I''m going to give you some points for weighing in, but perhaps I didn't explain my dilemma thoroughly enough. But thanks for chipping in nevertheless.

Thanks again!
0
 
Jim RiddlesPrepress/OMS SpecialistCommented:
Bruce,

I'm happy to be of assistance.  Have a great weekend!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.