JQuery эффект наведения на стол - PullRequest
Новая
       25

JQuery эффект наведения на стол

3 голосов
/ 05 марта 2011

Я новичок в jQuery и пытаюсь создать эффект парения на моем столе, но не знаю как.Я хотел бы сделать только текст красным, а затем, как убрать красный цвет снова, когда фокус потерян.

Ответы [ 6 ]

5 голосов
/ 05 марта 2011

Все, что вам нужно сделать, это передать еще одну функцию, чтобы навести курсор мыши. 

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

См. Пример по jsfiddle .

Или вы можете сделать это только в CSS. 

tr:hover{
    color:red;
}

IE 5/6 поддерживает оба только по ссылкам. IE 7 поддерживает: зависать, но не: активно, включено все элементы. с здесь .

0 голосов
/ 05 марта 2011

Поскольку стили, как правило, сложнее, чем красный текст, вы можете рассмотреть возможность перехода по этому маршруту: 

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

redHover будет что-то вроде 

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

Тогда вы можете изменить стиль, не переписывая свой jQuery.

0 голосов
/ 05 марта 2011

Небольшой обходной путь: 

<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 голосов
/ 05 марта 2011 
<style type="text/css">
.highlight { background-color:red; }
<style>
<script>
$(
 function()
 {
  $("table>tr").hover(
   function()
   {
    $(this).addClass("highlight");
   },
   function()
   {
    $(this).removeClass("highlight");
   }
  )
 }
)
</script>
0 голосов
/ 05 марта 2011

.hover () функция в jQuery принимает два аргумента: одну функцию для мыши в событии и вторую функцию для мыши вне: 

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

PS: в общем, в ситуации, подобной вашей, лучше изменить класс элемента, а не сам атрибут css. Используйте .addClass () и .removeClass (). Таким образом, в будущем вам будет легче добиться эффекта наведения, просто изменив css вместо javascript.

0 голосов
/ 05 марта 2011

Вам нужно добавить обработчик при наведении курсора. Смотрите здесь: http://jsfiddle.net/bF9xy/ документация здесь: http://api.jquery.com/hover/

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