jQuery悬停效果

Question

jQuery悬停效果

4

我有一堆li元素，想要使用奇偶数交替着色，并根据鼠标悬停来突出显示。为了取消突出显示，我需要追踪以前使用的颜色，奇数还是偶数。为了做到这一点，当我应用突出显示颜色时，我首先将一个任意属性设置为它。这种方法有什么不足之处吗？有更好的方法吗？以下是代码:

<script type="text/javascript">
var init = function(event){
$("li:odd").css({'background-color' :  '#eeeeee', 'font-weight' : 'bold'});
$("li:even").css('background-color', '#cccccc');  
    //initial colors setup

    $("li").hover(
    function ()   //hover over
    {
        var current = $(this);
        current.attr('old-background', current.css('background-color'));
        current.css('background-color', '#ffee99');

    }
    , function()  //hover out
{
    var current = $(this);
    current.css('background-color', current.attr('old-background'));
})

}
$(document).ready(init);
</script>

有没有更好的方法来解决这个问题呢？

- Ori

4个回答

3

你应该使用addClass和removeClass来实现这一点，而不是直接操作CSS。

<style>
  li.hover {
    background-color: #ffee99 !important;
  }
</style>

<script type="text/javascript">
  var init = function(event){
    $("li:odd").css({'background-color' :  '#eeeeee', 'font-weight' : 'bold'});
    $("li:even").css('background-color', '#cccccc');  
    //initial colors setup

    $("li").hover(
      function ()   //hover over
      {
        $(this).addClass('hover');

      }
      , function()  //hover out
      {
        $(this).removeClass('hover');
      })
    }
    $(document).ready(init);

- benlumley

这确实是一种更好的做法。 - Gab Royer

将奇数和偶数分别定义为类，就像其他答案中所述，这也是一个不错的主意。 - benlumley

1

你可以引入一个名为 highlighted 的 CSS 类，并调用 current.addClass('highlighted') 来在鼠标悬停时添加该类，以及 current.removeClass('highlighted') 来在鼠标移出时移除该类。我假设你也已经在你的 CSS 文件中添加了奇数和偶数类。

<script type="text/javascript">
var init = function(event){
    //initial colors setup
    $("li:odd").addClass('odd');
    $("li:even").addClass('even');  

    $("li").hover(
        function ()   //hover over
        {
                $(this).addClass('highlighted');

        }
        , function()  //hover out
        {
                $(this).removeClass('highlighted');
        })

}
$(document).ready(init);
</script>

在您的文件中，highlighted 应该在 even 和 odd 类之后声明，以便能够覆盖默认颜色。

- Energiequant

他正在使用jQuery，所以:even和:odd选择器将无问题地工作。关于CSS中类的出现顺序的好点子。我的代码示例已经按正确顺序放置了它们，但我忘记在代码中做出注释。 - SolutionYogi

我注意到他在我最初发布后立即使用了:odd和:even作为jQuery选择器，并立即删除了这个提示。无论如何，感谢你的留言。 :) - Energiequant

0

像其他的一样，你也可以使用它

$("li:odd").toggleClass("odd");

或者

$("li:even").toggleClass("odd");

如果你想改变第一项的颜色。（我认为你也可以使用first）

- darkporn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SolutionYogi · Accepted Answer

我同意benlumley的观点，你应该使用addClass/removeClass方法。

你的CSS可能如下所示，

li {
    font-weight: bold;
}

li.odd {
    background-color: '#eee';
}

li.even {
    background-color : '#ccc';
}

li.hover {
    background-color : '#ffee99';
}

你的初始化函数现在应该像这样：

var init = function(event)
{
    $('li:odd').addClass('odd');
    $('li:odd').addClass('even');

    $('li').hover(  function()
                    {
                        $(this).addClass('hover');
                    },
                    function()
                    {
                        $(this).removeClass('hover');
                    }
                   );

}

这段代码的优点是，如果您想更改列表项的样式，只需在CSS代码中更改颜色，而无需修改JS代码！