Question

如果你将鼠标移到class1a上，那么class2a和class2b的CSS就会改变。

这种模式一遍又一遍，但班级名称不断变化。

这导致了很多代码..我想知道是否有办法使用jQuery来使它更多紧凑？

注意，我显然愿意更改类名...只需要能够区分它们，就像你在这段代码中看到的那样......

$('.class1a').mouseover(function(){
   $('.class2a, .class2b').css( {height : '50px' , top: '75px'});
}).mouseout(function(){
    $('.class2a, .class2b').css({height : '25px' , top: '100px'});
  });

$('.class1b').mouseover(function(){
   $('.class2c, .class2d').css({height : '50px' , top: '75px'});
}).mouseout(function(){
    $('.class2c, .class2d').css({height : '25px' , top: '100px'});
  });

Answer 1

您可以使用.hover()：

$('.class1a').hover(function(){
   $('.class2a, .class2b').css( {height : '50px' , top: '75px'});},
   function(){
    $('.class2a, .class2b').css({height : '25px' , top: '100px'});}
 );

为了简化代码，您可以将“default css”（25px高度等）添加到class2a和class2b的css定义中，添加一个包含鼠标悬停部分的css的.hover类，然后使用toggleClass()在悬停时覆盖此设置：

 $('.class1a').hover(function()
 { $('.class2a, .class2b').toggleClass("hover");});

 $('.class1b').hover(function()
 { $('.class2c, .class2d').toggleClass("hover");});

Answer 2

您可以使用具有多个匹配项的选择器和css对象预定义变量，也可以使用.hover()方法

var s1 = '.class2a, .class2b';
var s2 = '.class2c, .class2d';
var css1 = {height : '50px' , top: '75px'};
var css2 = {height : '25px' , top: '100px'};

$('.class1a').hover(function(){
    $(s1).css(css1);
}, function(){
    $(s1).css(css2);
});

$('.class1b').hover(function(){
    $(s2).css(css1);
}, function(){
    $(s2).css(css2);
});

Answer 3

我真的不喜欢像这样制作N份代码，所以我想到了一种不同的方法。我想知道你是否可以使用页面的结构来辨别当鼠标悬停在不同元素上时你想要改变哪些元素。例如，如果您悬停的东西和您想要在悬停期间想要更改的内容可以放入一个公共父容器中，那么您可以使用页面结构使它们全部使用一组jQuery，如这个和适当的类名分配：

$(".blob").hover(function() {
    $(this).parent().find(".changeMe").addClass("myHover");
}, function() {
    $(this).parent().find(".changeMe").removeClass("myHover");
});

这个CSS将悬停函数挂钩到类“blob”的所有实例。然后，在处理程序中，它获取当前元素（被悬停的元素），获取它的父元素，然后查找该父元素中具有“changeMe”类的所有项并添加到它找到的元素“myHover” ”

HTML shell看起来像这样：

<div class="combo">
<div class="blob"></div>
<div class="changeMe"></div>
</div>

如果真实世界的示例比共享父级更复杂，您只需将关系中的任何内容编码到一段jQuery代码中，然后让它适用于所有实例。例如，你甚至可以获取悬停对象的类名（假设它是“level3”），解析出根名称“level”和数字3，然后在数字中加一，并为所有对象添加一个类“level4”类。由于它是JS，你可以发明任何与你的HTML结构相匹配的算法。好处是你可以编写一段适用于所有对象的代码，而不是一遍又一遍地重复代码。

而且，你可以拥有尽可能多的这些HTML，它们都是由一个jQuery提供的。您可以添加其他类，并且显然在此结构的每个副本中放置不同的内容或其他div。

如果你想以同样的方式修改多个东西，那么只需在父类中包含多个div，其中包含“changeMe”类，它们都将被修改。 jsFiddle中的第二个块显示了如何使用相同的代码修改同一块中的多个内容。

你可以在这里看到它：http://jsfiddle.net/jfriend00/XW75p/。将鼠标悬停在任何蓝色条上。所有蓝条都由单个jQuery控制。

此外，通过使用类名而不是在代码中设置CSS，您甚至可以让不同的对象以不同的方式响应相同的jQuery代码。您使用公共类名来触发jQuery行为，然后您也可以始终分配唯一的类名，以允许您使行为唯一（在CSS中）。

Answer 4

根据浏览器支持要求/ HTML结构，您无法使用CSS中的hover选择器实现此目的吗？

jQuery：有没有办法让这段代码更紧凑？

4 个答案: