我写了下面的代码和2个问题： 1）我想当光标悬停在带有详细信息类的div上时，颜色已经改变为整个div但是在我的内部div的代码中没有这样做。 2）为所有div编写的jquery行也几乎相同， 而且我有很多这些div。 我可以编写代码简介以避免重复吗？
请告诉我怎么做！
Private Sub CommandButton2_Click()
Dim headersRange As Range, cellsToloop As Range
Dim col As Long, lRow As Long, colName As String
Set headersRange = Range("HeadersToFind")
For Each cellsToloop In headersRange 'This line works
If cellsToloop.Value = "Sun" Then 'This line works
cellsToloop.Cells.Interior.Color = RGB(160, 160, 100) ' up to here
'From here it does nothing
col = cellsToloop.Column
colName = Split(col.Cells(, col).Address, "$")(1)
lRow = .Range(colName & .Rows.Count).End(xlUp).Row
Set rng = .Range(colName & "8:" & colName & lRow)
rng.Cells.Interior.Color = RGB(160, 160, 200)
'Upt her doesnt work
End If
Next cell
End Sub
$(".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;
}
答案 0 :(得分：7)
此处不需要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类，如果您希望所有容器div都改为相同的背景颜色或/和文本颜色，您可以这样做：
.details:hover .color-block {
background: green;
}
.details:hover .text-block {
color: blue;
}
答案 1 :(得分：3)
您的直接问题是，您同时使用hover()（本身为mouseenter和mouseleave）以及mouseout。这意味着您实际上正在筹集多个活动。要解决此问题，请单独使用hover()并提供两个函数参数。 mouseenter的第一个和mouseleave的第二个。
$(".detail-1").hover(function() {
$(".detail-1 div:first-child").css("background-color", "green");
$(".detail-1 div:nth-child(2) p").css("color", "blue");
}, 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");
}, 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");
}, 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>
请注意，更好的方法是使用CSS单独使用:hover伪选择器实现相同的悬停状态效果。这也将通过代理干你的代码。
.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 div:first-child { background-color: green; }
.detail-2:hover div:first-child { background-color: yellow; }
.detail-3:hover div:first-child { background-color: pink; }
.details:hover div:nth-child(2) p { color: blue; }<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>
答案 2 :(得分：0)
首先，请注意elementID是一个字符串。你可以通过将重复的代码包装到它自己的函数中并传递elementID来改写你的函数。这将减少你剪切和粘贴代码。