All geek questions in one place

JQuery freeze effect over table

I am new to jQuery and I am trying to make a hover effect on my table, but I don't know how to do it. I would like to make only the text red, and then how to remove the red color again when the focus is lost.

This is what I still have:

<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>
+3
source share
6 answers

All you have to do is pass another function to move the mouse cursor over the mouse hold.

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

See jsfiddle example .

Or you can do it only in css.

tr:hover{
    color:red;
}

IE 5/6 only supports links. IE 7 supports: guidance, but not: active, on all elements. from here .

+5
source

. . : http://jsfiddle.net/bF9xy/ : http://api.jquery.com/hover/

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

.hover() jQuery : :

$('dom element').hover(function()
{
    //your code for mouse over
}, function()
{
   //your code for mouse out
});

PS: , , , , css. .addClass() .removeClass(). , , css javascript.

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

:

<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>/
0

, , :

$(function() {
$('tr').hover(function() {
    $(this).toggleClass('redHover')
        }, function() {
    $(this).toggleClass('redHover')
    });
});

redHover -

<style>
.redHover{
    color:red;
}
</style>

jQuery.

0

Source: https://habr.com/ru/post/1796500/

More articles:


All Articles