javascript - 如何简要介绍我的 jquery 代码？

Question

我写了下面的代码和 2 个问题:1)我想要当光标悬停在我的带有详细信息类的 div 上时，整个 div 的颜色发生变化，但在我的内部 div 代码中没有这样做。2) 为所有 div 编写的 jquery 行也几乎是相同的，我有很多这样的 div。我可以写我的代码简介以避免重复吗？

请你告诉我怎么做!

$(".detail-1").hover(function() {
  $(".detail-1 div:first-child").css("background-color", "green");
  $(".detail-1 div:nth-child(2) p").css("color", "blue");
})
$(".detail-1").mouseout(function() {
  $(".detail-1 div:first-child").css("background-color", "#41b5e7");
  $(".detail-1 div:nth-child(2) p").css("color", "black");
})


$(".detail-2").hover(function() {
  $(".detail-2 div:first-child").css("background-color", "yellow");
  $(".detail-2 div:nth-child(2) p").css("color", "blue");
})
$(".detail-2").mouseout(function() {
  $(".detail-2 div:first-child").css("background-color", "#41b5e7");
  $(".detail-2 div:nth-child(2) p").css("color", "black");
})


$(".detail-3").hover(function() {
  $(".detail-3 div:first-child").css("background-color", "pink");
  $(".detail-3 div:nth-child(2) p").css("color", "blue");
})
$(".detail-3").mouseout(function() {
  $(".detail-3 div:first-child").css("background-color", "#41b5e7");
  $(".detail-3 div:nth-child(2) p").css("color", "black");
})

.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="details detail-1" data-number="1">
  <div>
  </div>
  <div>
    <p>text-1</p>
    <P>Description-1</P>
  </div>
</div>
<div class="details detail-2" data-number="2">
  <div>
  </div>
  <div>
    <p>text-2</p>
    <P>Description-2</P>
  </div>
</div>
<div class="details detail-3" data-number="3">
  <div>
  </div>
  <div>
    <p>text-3</p>
    <P>Description-3</P>
  </div>
</div>

Answer 1

这里不需要 jQuery，您可以使用此 CSS 执行以下操作。

最好的方法是向您的 div 添加类，并以这种方式定位它们。但如果您无法编辑代码，请查看@RoryMcCrossan 的回答。

因为尽管 CSS 中的伪选择器很有用，而且当然可以按照您的方式使用，但最好尽可能使用 id 和类。这也意味着更容易遵循代码。

所以首先，向改变颜色的 div 和包含文本的 div 添加一个类，如下所示:

<div class="color-block"></div>
<div class="text-block"></div>

然后像这样用 CSS 定位它们:

.detail-1:hover .color-block {
    background: green;
}

.detail-1:hover .text-block {
    color: blue;
}

示例片段

.details {
  width: 200px;
  height: 90px;
  border: 1px solid #333;
  margin-top: 10px;
}
.details > div {
  float: left;
}
.details > div > p {
  line-height: 15px;
  padding-left: 10px;
}
.details div:first-child {
  width: 70px;
  height: 70px;
  background-color: #41b5e7;
  margin: 10px 0px 0px 10px;
}

.detail-1:hover .color-block {
  background: green;
  }

.detail-1:hover .text-block {
  color: blue;
  }

<div class="details detail-1" data-number="1">
  <div class="color-block">
  </div>
  <div class="text-block">
    <p>text-1</p>
    <p>Description-1</p>
  </div>
</div>

由于您在所有容器 div 上也有 details 类，如果您希望它们全部更改为相同的背景颜色或/和文本颜色，您可以这样做:

.details:hover .color-block {
    background: green;
}

.details:hover .text-block {
    color: blue;
}