Javascript 如何为影响其他元素的悬停元素优化jQuery代码
我在这里找到了一些代码,但我想看看它是否可以优化。我有一张桌子,第一行有一张图片。在第二行中,有一些单元格,当您将鼠标悬停在上面时,顶部的图像会发生变化。我的JSFIDLE现在正在使用颜色。稍后我将交换图像 这些行现在只有3个单元格,但一旦我弄明白了这一点,它们可能会包含12个或多个单元格,所以当我将鼠标悬停在所有这些单元格上时,需要显示不同的图像 代码可以工作,但我认为如果我最多使用12个单元格/框,它将不会非常有效。如何优化此代码Javascript 如何为影响其他元素的悬停元素优化jQuery代码,javascript,jquery,css,Javascript,Jquery,Css,我在这里找到了一些代码,但我想看看它是否可以优化。我有一张桌子,第一行有一张图片。在第二行中,有一些单元格,当您将鼠标悬停在上面时,顶部的图像会发生变化。我的JSFIDLE现在正在使用颜色。稍后我将交换图像 这些行现在只有3个单元格,但一旦我弄明白了这一点,它们可能会包含12个或多个单元格,所以当我将鼠标悬停在所有这些单元格上时,需要显示不同的图像 代码可以工作,但我认为如果我最多使用12个单元格/框,它将不会非常有效。如何优化此代码 // box 1 $('#whybox1').mouseov
// box 1
$('#whybox1').mouseover(function(){
$('#whybox1').css('background-color', '#F7FE2E');
$('#animalbox').css('background-color', '#F7FE2E');
});
$('#whybox1').mouseout(function(){
$('#whybox1').css('background-color', '#d1e6f8');
$('#animalbox').css('background-color', '#d1e6f8');
});
作为一个补充,我见过像这样的使用n:child的实现,但是在我必须支持的旧浏览器上,这种实现会被破坏
JSfiddle:
jshiddle:有什么原因需要使用鼠标悬停和鼠标出,而不仅仅是悬停?如果您不必担心IE6,那么您可以在CSS中使用:hover来交换样式
#whybox1:hover {
background-color: #d1e6f8;
}
#whybox1:hover {
background-color: #F7FE2E;
}
如果需要动态地将图像添加到表中,但它不能是背景图像,那么需要使用JS。我建议这样做:
$('#whybox1').hover(function() {
// this happens when you hover over the element
$(this).addClass('hover');
},
function() {
// this happens when you're no longer hovering over the element
$(this).removeClass('hover');
});
只需添加一个类并修改应用该类时的元素样式,然后在悬停结束时删除该类
即使你决定使用mouseover/out,它也不是低效的——你为什么这么认为?除非您将这些事件附加到成百上千个元素,否则您不会看到性能问题。不管你怎么做,12个表格单元格都可以。如果有可能的话,我建议您使用CSS。您是否有理由使用鼠标悬停和鼠标悬停,而不只是悬停?如果您不必担心IE6,那么您可以在CSS中使用:hover来交换样式
#whybox1:hover {
background-color: #d1e6f8;
}
#whybox1:hover {
background-color: #F7FE2E;
}
如果需要动态地将图像添加到表中,但它不能是背景图像,那么需要使用JS。我建议这样做:
$('#whybox1').hover(function() {
// this happens when you hover over the element
$(this).addClass('hover');
},
function() {
// this happens when you're no longer hovering over the element
$(this).removeClass('hover');
});
只需添加一个类并修改应用该类时的元素样式,然后在悬停结束时删除该类
即使你决定使用mouseover/out,它也不是低效的——你为什么这么认为?除非您将这些事件附加到成百上千个元素,否则您不会看到性能问题。不管你怎么做,12个表格单元格都可以。如果可能的话,我建议使用CSS。可能是这样的 这只是一种方法。这样做的目的是在td中添加一些属性,这些属性将保存一些信息(在本例中为颜色),并在悬停时使用这些信息 Javascript: html:
也许是这样的 这只是一种方法。这样做的目的是在td中添加一些属性,这些属性将保存一些信息(在本例中为颜色),并在悬停时使用这些信息 Javascript: html:
如Neysor所指出,更改了html5中提供的数据模型的属性。如Neysor所指出,更改了html5中提供的数据模型的属性。
<table>
<tr>
<td colspan="3" id="animalbox">Animal Box</td>
</tr>
<tr>
<td id="whybox1" data-color="red">1</td>
<td id="whybox2" data-color="blue">2</td>
<td id="whybox3" data-color="green">3</td>
</tr>
</table>