鼠标悬停时，Cufon 悬停保持悬停状态答案

【问题标题】：Cufon hover stays in hoverstate on mouseout鼠标悬停时，Cufon 悬停保持悬停状态
【发布时间】：2011-08-23 07:11:12
【问题描述】：

http://www.basenharald.nl/3d

悬停按钮。我想要的是cufon文本更改为#e90c00。出于某种原因（有时），当我将鼠标从按钮上移开时，它会保持 #e90c00。

这是我使用的代码：

Cufon.replace('#nav li a span', {  hover: true, hoverables: { span: true}, textShadow: '#353535 1px 1px'} );

有谁知道我该如何解决这个问题？

【问题讨论】：

您似乎在双重应用悬停效果。如果从选项中删除 hoverables: { span: true} 会发生什么？另外，您是否尝试过替换#van li a？
@William Niu 那行不通（试过了）。它需要悬停和悬停。此外，如果我设置 nav li a 所有文本都变为 cufon 并且悬停问题仍然存在

标签： html css hover cufon

【解决方案1】：

我来这篇文章是为了解决子菜单的 cufon 悬停问题。我对答案印象深刻，并尝试重置无济于事。 cufon FAQ 中的以下文章可能会帮助其他寻找类似内容的人：

https://github.com/sorccu/cufon/wiki/FAQ#wiki-faq-10

【讨论】：

【解决方案2】：

看看这个：https://github.com/sorccu/cufon/wiki/styling

你可以尝试一些测试

Cufon.replace('#nav li a span', {
hover: true,
hoverables: { span: true, a: true }
});


Cufon('#nav li a span', {
color: '#fff',
hover: {
    color: '#e90c00'
       }
});

【讨论】：

对不起，simon，但我已经修复了那个部分......现在悬停在鼠标上。

【解决方案3】：

你需要调用 Cufon.refresh();例如：

$('#nav li a span').hover(function(){
    $(this).css('color','#e90c00');
    Cufon.refresh($(this));
// this is the mouse out
},function(){
    $(this).css('color','#fff');
    Cufon.refresh($(this));
});

【讨论】：

它以某种方式工作。我是否需要实现这个 sn-p 并将跨度的 cufon.replace 保持不变？如果可以的话，现在就看看吧。它可以工作，但速度非常慢，速度慢。
是的，cufon.replace();电话在我上面的 sn-p 之前。我很惊讶它对你来说很慢。如果删除 textShadow 会发生什么？它更快吗？
仍然真的很慢（我把阴影放回去，因为它没有任何区别）。是不是如果你使用 cufon.refresh 每次悬停和鼠标悬停时都必须重新加载 cufon？
Cufon.refresh();不重新加载 Cufon，它只是重复 Cufon.replace();你有电话。您可以通过传入选择器使其更具体，请参阅更新的答案。
感谢到目前为止的所有输入，但这也不起作用。事实上，我现在什至失去了阴影，它仍然像以前一样慢

【解决方案4】：

为什么不使用 CSS？？

#nav li a span
{
  color: #fff;
/* and other default styles */
}
#nav li a span:hover
{
  color: #e90c00;
/* and whatever other styling u need on hover */
}

【讨论】：

【解决方案5】：

解决了这个问题：

$('#nav li').hover(function(){ 
    $('a span', this).css('color','#e90c00'); 
    Cufon.refresh('#nav li a span'); 

 },function(){ // this is the mouse out 

    $('a span', this).css('color','#fff'); 
    Cufon.refresh('#nav li a span'); 
});

【讨论】：

【解决方案6】：

一些用户建议的 jQuery 脚本实际上是让它正常工作的唯一方法。 Cufon 文档中解释的 Cufon 样式效果确实有效，但有时在您将鼠标移出按钮区域后，悬停效果仍会显示。这当然是一种耻辱。您至少需要在触发悬停后插入一个 Cufon.refresh() 或 Cufon.replace() 。您可以使用 CSS 保留样式，无需在 JS sn-p 中实现。这是我用于该案例的代码：

$('ul#nav ul li a').hover(function(){ 
    Cufon.refresh('ul#nav ul li a'); 
 },function(){ 
    Cufon.refresh('ul#nav ul li a'); 
});

当然，对于 CSS，类似的东西：

ul#nav li a { color: black } ul #nav li a:hover { color :red }

【讨论】：

【解决方案7】：

更短的 sn-p：

$('ul#nav ul li a').mouseout(function(){ Cufon.refresh('ul#nav ul li a'); });

【讨论】：