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?
Bruce GustPHP DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Bruce GustPHP 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.