如何使这种悬停效果（悬停1按钮更改元素的ID，然后在悬停时将其更改回其原始ID？）[jquery，css3]

Question

所以我有一个最初的ID为#main的段落

我有一个按钮：＃button1

所以我想发生的是，当我将鼠标悬停在按钮周围时，我想将段落的ID更改为：#intro

（具有CSS3样式）

当我将鼠标悬停在按钮上时，应将段落的ID更改为：#outro

（也有CSS3样式）

我这样做是这样的：

JS

$(document).ready(function(){  
    $("#button1").hover(function(){
        $("#main").attr("id","intro");
    },function(){
        $("#intro").attr("id","outro");
    });  
});

CSS

#main{
    color:red;
}
#intro{
    -webkit-animation: recolor .5s;
    color:blue; 
}
@-webkit-keyframes recolor {
    from{
        color:red;
    }
    to{
        color:blue;
    }
}
#outro{
    -webkit-animation: recolorout .5s;
    color:red;  
}
@-webkit-keyframes recolorout {
    from{
        color:blue;
    }
    to{
        color:red;
    }
}

这是可行的，问题是我只能执行一次。 我知道，因为我没有将其更改回#main

但是把它放在哪里：

$("#outro").attr("id","main");

以便在悬停过程之后将段落更改回其初始状态？

还是有其他解决方案？ 提前致谢

这是js小提琴。

Answer 1

为什么不使用CSS而不是使用jQuery来循环悬停效果？

http://jsfiddle.net/JtKFk/

HTML：

<p class="hoverable">hello world this is a test</p>

CSS：

.hoverable{
   -webkit-animation: recolorout .5s;
   color:red;  
}

.hoverable:hover{
   -webkit-animation: recolor .5s;
   color:blue;  
}

@-webkit-keyframes recolor {
   from{
       color:red;
   }
   to{
       color:blue;
    }
}

@-webkit-keyframes recolorout {
   from{
       color:blue;
   }

   to{
       color:red;
   }
}

Answer 2

码：

$("#button1").mouseenter(function(){
$("#main").addClass("intro");
}).mouseleave(function(){
  $("#main").removeClass("intro");});

CSS：

#main {
color:red;
}

.intro {-webkit-animation：重新着色.5s; 颜色：蓝色; } @ -webkit-keyframes重新着色{from {color：red; }至{color：blue; }} .outro {-webkit-animation：recolor1 .5s; 红色; } @ -webkit-keyframes recolor1 {来自{color：blue; }至{color：red; }}

http://jsfiddle.net/7eBCS/2/

Answer 3

如果您在dom中颠倒顺序，则可以执行以下操作：

 #button1  ~ p{
color:red;

}

#button1:hover  ~ p{
color:blue;

}

<button id="button1">button</button>
<p id="main">This should change the pharagraph within mouseenter/mouseleave</p>

http://jsfiddle.net/7eBCS/3/

还有这个技巧：

 <p id="main">This should change the pharagraph within mouseenter/mouseleave</p>

 </button>




#button1 {
position:relative;

}

p{
 position:absolute;
top:200%;
width:400px;
 }


  #button1:hover > p{
   color:red;

  }

http://jsfiddle.net/7eBCS/4/

Answer 4

请通过工作示例查看此提琴： http : //jsfiddle.net/chantastic/rGc7h/1/

通过类进行修改

更改id会使返回原始状态非常困难，而又无法将其保留在JavaScript中的某个位置。 最好的选择是在样式表中添加修改类：

#main { /* base styles */ }
#main.intro { /* intro overrides */ }
#main.outro { /* outro overrides */ }

有了这些之后，您可以使用.addClass()为正确的事件添加正确的类。

$('#button1').mouseenter(function () {
  $('#main').addClass('intro');
});

不要忘记删除旧的类！

如果仅执行上述操作，则将添加该类将永远存在。 这不是你想要的。 您需要删除“ .intro”，以便可以添加“ .outro”并使这些样式接管。

$('#button1').mouseenter(function () {
  $('#main')revomeClass().addClass('intro');
});

空的.removeClass()将删除所有类。 因此请注意。 在这种情况下，这正是我们想要的。

使用.mouseenter / .mouseleave事件而不是.hover

这是个人喜好。 我发现以后更容易阅读和理解。 在幕后，jQuery将.hover()转换为.mouseenter和.mouseleave事件。

这是最终结果：

$(document).ready(function (){
  $main    = $('#main')
  $button1 = $('#button1')

  $button1.mouseenter(function () {
    $main.removeClass().addClass('intro');
  });

  $button1.mouseleave(function () {
    $main.removeClass().addClass('outro');
  });  
});

使用此解决方案，“。outro”类将持续存在，直到您再次将鼠标悬停在按钮上。

结合上面的样式声明，它可以完全按照您现在的期望工作，并且以后可以轻松更改。

同样，这是一个有效的小提琴： http : //jsfiddle.net/chantastic/rGc7h/1/

Answer 5

您不应该使用id更改元素的样式。 尝试改用类。 这将防止需要根据事件是否已经触发来更改任何代码。

$(document).ready(function(){

    $("#button1").hover(function(){
        $("#main").addClass('intro').removeClass('outro').removeClass('main');
    },
    function(){
        $("#main").addClass('outro').removeClass('intro');;
    });
});

CSS：

.main{
   color:red;
}

.intro{
   -webkit-animation: recolor .5s;
   color:blue;  
}

@-webkit-keyframes recolor {
    from{
       color:red;
    }
    to {
       color:blue;
    }
}

.outro{
   -webkit-animation: recolorout .5s;
   color:red;   
}

@-webkit-keyframes recolorout {
    from{
        color:blue;
    }
    to{
        color:red;
    }
}