asked on

How can I disable hover and active effects from jQuery?

I have a table with 10 <tr> tags. My CSS has a hover and active effect going on with these 10 rows. Each of these 10 <tr> tags have an attribute of custID. What I am trying to accomplish is to disable the hover and active effects if this custID has a value of -1. Here is the code snippet, please look for my /****** comments ******/, that will lead you to what I'm asking about:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
    #gridContents tr {
        background: lightgray;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    #gridContents tr:nth-child(2n) {
        background: #A3C5FF;
    }
    
    #gridContents tr:hover {
        background: #FFF6C7;
        cursor: pointer;
    }
    
    #gridContents tr:active {
        background: yellow;
    }

    #gridContents tr.selectedRow { /* This is the class I'm toggling */
        background: green;
    }
        
</style>
<script type="text/javascript">
$(function() {
    $("#gridContents").mouseover(function() {
        if ($(this).attr("custID") === "-1") {
            /*******************************************************
            I'd like to disable the hover and active effect here because
            custID is -1. How can I do this?
            *******************************************************/
        }
    });
});
</script>
</head>
<body>
<table id="gridContents">
    <tr custID="1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="2"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="3"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="4"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="5"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="6"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="7"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="8"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="-1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="-1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
</table>
    <div id="timer"></div>
</body>
</html>

Open in new window

Thanks in advance!

ASKER CERTIFIED SOLUTION

skij

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

skij

If you insist on using jQuery, you could do this:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
    #gridContents tr {
        background: lightgray;
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    #gridContents tr:nth-child(2n) {
        background: #A3C5FF;
    }
    
    #gridContents tr:hover:not(.inactive) {
        background: #FFF6C7;
        cursor: pointer;
    }
    
    #gridContents tr:active:not(.inactive) {
        background: yellow;
    }

    #gridContents tr.selectedRow { /* This is the class I'm toggling */
        background: green;
    }
        
</style>

<script type="text/javascript">
$(function() {
    $("#gridContents tr[custID=-1]").addClass('inactive');
});
</script>

</head>
<body>
<table id="gridContents">
    <tr custID="1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="2"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="3"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="4"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="5"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="6"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="7"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="8"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="-1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="-1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
</table>
    <div id="timer"></div>
</body>
</html>

Open in new window

skij

Or:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
    #gridContents tr {
        background: lightgray;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    #gridContents tr:nth-child(2n) {
        background: #A3C5FF;
    }
    
    #gridContents tr:hover {
        background: #FFF6C7;
        cursor: pointer;
    }
    
    #gridContents tr:active {
        background: yellow;
    }

    #gridContents tr.selectedRow { /* This is the class I'm toggling */
        background: green;
    }
        
</style>
<script type="text/javascript">
$(function() {
    $("#gridContents tr[custID=-1]:nth-child(1n)").mouseover(function() {
      $(this).css('cursor','default');
      $(this).css('background','lightgray');
    });
    $("#gridContents tr[custID=-1]:nth-child(2n)").mouseover(function() {
      $(this).css('cursor','default');
      $(this).css('background','#A3C5FF');
    });
});
</script>
</head>
<body>
<table id="gridContents">
    <tr custID="1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="2"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="3"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="4"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="5"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="6"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="7"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="8"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="-1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
    <tr custID="-1"><td>12345</td><td>Doe</td><td>John</td><td>8005551212</td><td>8005551213</td><td>8005551214</td><td>8005551215</td></tr>
</table>
    <div id="timer"></div>
</body>
</html>

Open in new window

elepil

ASKER

skij, I like the first one (the one I marked as best) because it is simplest.

Thank you very much for your help. Greatly appreciated!