Javascript 如何实现这种悬停效果（悬停1按钮更改元素的ID，然后当悬停时，它会更改回元素的原始ID？[jquery，css3]

因此，我有一个段落，其初始ID为：#main

我有一个按钮：#按钮1

因此，我想做的是，当我在按钮周围悬停时，我想将段落的ID更改为：#intro

（具有CSS3样式）

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

（也有CSS3风格）

我喜欢这样：

js

css

这是有效的，问题是我只能这样做一次。我知道，因为我没有把它改回#main

但它把这个放在哪里：

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

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

还是有其他解决办法？提前谢谢

---

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

$(document).ready(function(){

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

CSS:

---

与其使用jQuery循环悬停效果，为什么不直接使用CSS呢

HTML:

代码：

CSS:

.介绍{ -webkit动画：reclor.5s； 颜色：蓝色； } @-webkit关键帧恢复器{ 从{ 颜色：红色； } 到{ 颜色：蓝色； } } 奥特罗先生{ -webkit动画：Recol1.5s； 颜色：红色； } @-webkit关键帧Recol1{ 从{ 颜色：蓝色； } 到{ 颜色：红色； } }

---

如果在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>

#按钮1~p{
颜色：红色；
}
#按钮1：悬停~p{
颜色：蓝色；
}
按钮
这将更改mouseenter/mouseleave中的Pharmagraph

还有一个诀窍：

 <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;

  }

这应该会更改mouseenter/mouseleave中的Pharmagraph
#按钮1{
位置：相对位置；
}
p{
位置：绝对位置；
最高：200%；
宽度：400px；
}
#按钮1：悬停>p{
颜色：红色；
}

---

请用一个工作示例查看此小提琴：

通过类进行修改 如果不将id保存在JavaScript中的某个地方，更改id将使您很难恢复到原始状态。您最好的选择是将修改类添加到样式表中：

#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”类将一直存在，直到您再次将鼠标悬停在按钮上

结合上面的样式声明，这完全符合您现在的期望，并且很容易在以后进行更改

---

---

同样，这里有一个可行的办法：

不要更改ID。改用class。我已经试过了，addClass（）和removeClass（）也有同样的问题，我该怎么做？jQuery的？讽刺的是，javascript中没有悬停函数，使用mouseenter/mouseleaveI只是复制了他的代码。如果他想支持其他浏览器，他可以使用相同的CSS布局，并为其他浏览器添加规则。嘿，兄弟，我使用webkit只是因为我使用google chrome，这只是为了学习：Di不仅仅使用CSS，因为我需要一个按钮来实现+1的效果，用于粘贴OP的CSS的缩短副本（目前是第三个副本；）@代码蟾蜍嘿，兄弟，我试过你的小提琴，但当我悬停按钮时，它会显示.intro，但它会变成红色（#main），即使我没有悬停，是的，我需要修复它。请让我调查一下。看到我的css技巧的另一个答案谢谢你的建议，但是你的代码的问题是当我悬停按钮时，它会执行.intro，但在执行.intro之后，它会变回红色（#main），你可能会从中删除主类以防止出现这种情况。我将更新解决方案。基本上，主类只是一个初学者类。您可以在第一次悬停后将其删除，而无需重新应用它。我认为teh1可能有一个更优雅的解决方案，不过。嗯，你的修订版不行。outro bro，可能是因为你删除了main？如果这就是你想要的，一定要把它标记为答案：）。有人投了反对票，但我不知道为什么，因为这正是您需要的。谢谢，我知道如何使用选择器“~”，但我想学习如何在jQuery中使用它。哇，非常感谢！：你的回答很准确，表达得很好：）谢谢你，伙计！虽然@Bic的答案也是正确的，但我想知道为什么它有-1vote@Twish很高兴我能帮忙！另一个用户肯定认为它没有很好地回答这个问题。

#main {
color:red;
}

 #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>

 <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;

  }

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

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

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

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

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

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