Question

嗨我想知道当你将鼠标悬停在列表上时，是否还有动态更改列表的类别。这是我的代码和小提琴。当我将鼠标悬停在li上时，我希望它能够改变课程。在mouseout上我想让它改回原版。

$('.navi > li').on("mouseover", function () {
    ($(this)).removeClass('.navi').addClass('.navi2');
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
});

http://jsfiddle.net/Samfr/8/

Answer 1

我认为悬停可能对你正在做的事情好一点。 http://api.jquery.com/hover/

另外，我不太清楚你在问什么，但上面悬停文档页面上的一个例子似乎描述了类似的内容。

$( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);

Answer 2

试试这个：

定义一个新类，例如dynamic-li

$('.dinamic-li').on("mouseenter", function () {
   $(this).addclass('navi');
   $(this).removeclass('navi2');
});

$('.dinamic-li').on("mouseleave", function () {
   $(this).addclass('navi2');
   $(this).removeclass('navi');
});

Answer 3

这会有用吗？

JSFiddle

Jquery的：

$('.navi > li').on("mouseover", function () {
    $('.hover-name', this).show();
    $(this).attr('class', 'red');
}).on("mouseout", function() { 
    $('.hover-name').hide();
    $(this).attr('class', '');
});

Answer 4

有我的解决方案：

$('.navi > li').on("mouseover", function () {
    $(this).addClass('active').siblings().removeClass(active);
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    if( $(this).hasClass('active'))
        $(this).removeClass('active');
    $('.hover-name').hide();
});

Working fiddle

Answer 5

添加和删除课程时，您有一段额外的时间。这些只应用于选择不改变类名的元素。

$('.navi > li').on("mouseover", function () {
  ($(this)).removeClass('navi').addClass('navi2');
  $('.hover-name', this).show();
}).on("mouseout", function() { 
  $('.hover-name').hide();
});

Answer 6

http://jsfiddle.net/Samfr/14/

这就是你的意思......

$('.navi > li').on("mouseover", function () {
    $(this).removeClass('navi').addClass('navi2');
    $('.hover-name', this).show();
}).on("mouseout", function() { 
    $('.hover-name').hide();
    $(this).removeClass('navi2').addClass('navi');
});

当您悬停链接时，颜色将为红色，当您使用鼠标输出时，颜色将重置这样你就可以看到脚本是如何工作的！

Answer 7

为什么不使用CSS解决方案，它更容易：

.hover-name { display: none; }
.navi li:hover .hover-name { display: block; }

检查updated Fiddle

在悬停后动态更改li的类

7 个答案: