悬停时更改背景div答案

【问题标题】：Change background div on hover悬停时更改背景div
【发布时间】：2019-08-06 07:57:31
【问题描述】：

我想使用 javascript 在悬停时更改 div 的背景和文本。但我遇到了一些问题。代码如下：

.square1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: black;
  color: white;
}

.square2 {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: blue;
  color: white;
}

<div class="squares">
  <div class="square1">
    <p>I'm square1!</p>
  </div>

  <div class="square2">
    <p>I'm square2!</p>
  </div>
</div>

我最后要做的是让第一个方块在悬停时显示为第二个方块。有人可以帮帮我吗？

【问题讨论】：

为什么不用:hoverin css
js代码在哪里？
你可以在你的css中使用:hover来改变背景。或者，您可以使用鼠标悬停功能来更改背景和文本
我在学校有一个作业，我真的需要使用 JavaScript。 PS谢谢大家

标签： javascript html css

【解决方案1】：

var w;
function a(e)
{
w=e.textContent;
e.textContent=document.querySelector('.square2 > p').textContent

}
function b(e)
{
e.textContent=w
}

.square1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: black;
  color: white;
}

.square1:hover {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: blue;
  color: white;
}

.square2 {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: blue;
  color: white;
}

.square2:hover {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: black;
  color: white;
}

<div class="squares">
  <div class="square1" onmouseover='a(this)' onmouseout='b(this)'>
    <p>I'm square1!</p>
  </div>

  <div class="square2">
    <p>I'm square2!</p>
  </div>
</div>

【讨论】：

【解决方案2】：

.square1 {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: black;
  color: white;
}

.square1:hover {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: blue;
  color: white;
}

.square2 {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: blue;
  color: white;
}

.square2:hover {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background: black;
  color: white;
}

<div class="squares">
  <div class="square1">
    <p>I'm square1!</p>
  </div>

  <div class="square2">
    <p>I'm square2!</p>
  </div>
</div>

【讨论】：

内容没有变化

【解决方案3】：

这就是你所需要的：

.square1:hover {
      background:blue;
      color:white;
      /* or any other props*/
}

【讨论】：

【解决方案4】：

正如 Prince 或 Maheer Ali 提到的那样；如果你想让它更好的淡入淡出效果添加到 CSS 中：

-webkit-transition: all .3s ease;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

【讨论】：