jQuery hover effet sur la table

Je suis nouveau sur jQuery et je suis en train de faire un hover effet sur ma table, mais je ne sais pas comment.
Je voudrais faire seulement le texte en rouge et ensuite, comment faire pour supprimer la couleur rouge de nouveau lorsque le focus a été perdu.

C'est ce que j'ai à ce jour:

<script type="text/javascript">
$(function() {
    $('tr').hover(function() {
        $(this).css('color', 'red')
    });
});
</script>


<table border="1">
    <tr>
        <th>ID</th>
        <th>name</th>
    </tr>
    <tr>
        <td>#1</td>
        <td>ole</td>
    </tr>
    <tr>
        <td>#2</td>
        <td>jeffrey</td>
    </tr>
    <tr>
        <td>#3</td>
        <td>collin</td>
    </tr>
    <tr>
        <td>#4</td>
        <td>eve</td>
    </tr>
</table>

votre code est parfait, mieux u utilisation .addClass

OriginalL'auteur Sjmon | 2011-03-05

5

Tout ce que vous devez faire est de passer à une autre fonction, le vol stationnaire de la souris quitter.
```
$('tr').hover(function() {
    $(this).css('color', 'red');
}, function() {
    $(this).css('color', '');
});
```
Voir l'exemple sur jsfiddle.

Ou vous pourriez le faire uniquement en css.
```
tr:hover{
    color:red;
}
```
IE 5/6 prend en charge les deux seuls sur les liens. IE
7 prend en charge :hover, mais non :active, sur
tous les éléments.
de ici.

OriginalL'auteur Mark Coleman

Vous avez besoin pour ajouter un gestionnaire sur le vol stationnaire.
Voir ici : http://jsfiddle.net/bF9xy/
la documentation ici : http://api.jquery.com/hover/

$(function() {
    $('tr').hover(function() {
        $(this).css('color', 'red')
    },function() {
        $(this).css('color', 'black')
    }
);
});

OriginalL'auteur DhruvPathak

0

.hover() en jQuery prend deux arguments: une des fonctions de la souris dans l'événement et une deuxième fonction de la souris:
```
$('dom element').hover(function()
{
    //your code for mouse over
}, function()
{
   //your code for mouse out
});
```
PS: en général, dans une situation comme la votre, est mieux de changer la classe de l'élément au lieu de l'attribut css lui-même. Utiliser .addClass() et .removeClass(). De cette façon, il sera plus facile de canghe hover effet dans l'avenir, tout en modifiant le css au lieu de javascript.

OriginalL'auteur Bakaburg

<style type="text/css">
.highlight { background-color:red; }
<style>
<script>
$(
 function()
 {
  $("table>tr").hover(
   function()
   {
    $(this).addClass("highlight");
   },
   function()
   {
    $(this).removeClass("highlight");
   }
  )
 }
)
</script>

OriginalL'auteur diEcho

Un peu de solution de contournement :

<html>
    <head>
        <script type="text/javascript">
            $(document).ready(function(){
                $('tr').hover(function() {
                    $(this).css('color', 'red')
                });
                $('tr').mouseout(function() {
                    $(this).css('color', 'black')
                });
            });
        </script>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>ID</th>
                <th>name</th>
            </tr>
            <tr>
                <td>#1</td>
                <td>ole</td>
            </tr>
            <tr>
                <td>#2</td>
                <td>jeffrey</td>
            </tr>
            <tr>
                <td>#3</td>
                <td>collin</td>
            </tr>
            <tr>
                <td>#4</td>
                <td>eve</td>
            </tr>
        </table>
    </body>
</html>/

OriginalL'auteur Zakaria

0

Car les styles sont généralement plus compliqué que le texte en rouge, vous pourriez envisager d'aller dans cette voie:
```
$(function() {
$('tr').hover(function() {
    $(this).toggleClass('redHover')
        }, function() {
    $(this).toggleClass('redHover')
    });
});
```
redHover serait quelque chose comme
```
<style>
.redHover{
    color:red;
}
</style>
```
Ensuite, vous pouvez changer le style sans avoir à réécrire votre jQuery.

OriginalL'auteur Jeremy Battle

Vous devez vous connecter pour publier un commentaire.