为什么不是'；t在css/html中悬停，允许我更改另一个div的样式？_Html_Css_Hover

为什么不是'；t在css/html中悬停，允许我更改另一个div的样式？

html css

为什么不是'；t在css/html中悬停，允许我更改另一个div的样式？,html,css,hover,Html,Css,Hover,我试图将鼠标悬停在I9ScanningRequestForm div上，将FormPreviewPane div的背景色从紫色更改为白色。然而，在我的Sharepoint 2010网页中，此悬停事件似乎被忽略。我的代码有问题吗？如何通过将鼠标悬停在另一个div上来控制一个div的颜色 <style> .opaqueBlock{ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; opacity:0.5

我试图将鼠标悬停在I9ScanningRequestForm div上，将FormPreviewPane div的背景色从紫色更改为白色。然而，在我的Sharepoint 2010网页中，此悬停事件似乎被忽略。我的代码有问题吗？如何通过将鼠标悬停在另一个div上来控制一个div的颜色

<style>

.opaqueBlock{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
opacity:0.5;
margin-left: 60px; 
width: 360px; 
height: 35px; 
background-color: #3D5567;
}

.opaqueBlock:hover{
border: 1px dotted #304A63;
}

.formLinkContainer{ 
width:430px; 
height:37px;
position: absolute;
}


.formLinkContainer:hover { 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
opacity: 0.4;
}


 #I9ScanningRequestForm:hover ~ #FormPreviewPane {
 background-color: white;
}


.formTextSpan{
position: absolute; 
z-index: 1; margin-left: 70px; 
color: white; 
margin-top: 1px; 
font-family: 'Didact Gothic' !important; 
font-size: 22px !important;
}

.formIcon{
height: 34px;
position: absolute; 
margin-left:13px;
}

 img{border: none;}

 </style>

 <link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>




<div style="background-image: url('/wg/ProdPayroll/Images_Decorative/WoodBackgroundMedium.jpg') !important; height: 1300px;">


<br/>


<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/Archiving_Cover_Sheet_Ease.pdf">
<div class="formLinkContainer" style="top: 180px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Archiving Cover Sheet</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>


<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/ARCHIVING%20SHEET.pdf">
<div class="formLinkContainer" style="top: 220px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
 <span class="formTextSpan">Archiving Sheet</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/Data%20Entry%20Feedback.pdf">
<div class="formLinkContainer" style="top: 260px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Data Entry Feedback Form</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/Data_Entry_Comm_Form_10.28.24.pdf">
<div class="formLinkContainer" style="top: 300px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Data Entry - Commercials</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/Data_Entry_Form.pdf">
<div class="formLinkContainer" style="top: 340px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Data Entry Assistance Request</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/DataPackageRemake.pdf">
<div class="formLinkContainer" style="top: 380px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Data Package Remake</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/emp_Receivable.pdf">
<div class="formLinkContainer" style="top: 420px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Employee Receivable Request Form</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/Filing_Cover_Sheet_v2.pdf">
<div class="formLinkContainer" style="top: 460px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Filing Cover Sheet</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/FedEx_UPS_Billing.pdf">
<div class="formLinkContainer" style="top: 500px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">FedEx/UPS Billing Form</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/Forgery_Claim.pdf">
<div class="formLinkContainer" style="top: 540px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Forgery Claim</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/HourstoGrossForm.pdf">
<div class="formLinkContainer" style="top: 580px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">Hours To Gross Form</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/I9_Archive_Form.pdf">
<div class="formLinkContainer" style="top: 620px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">I-9 Discrepancy</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>


<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/I-9_Scanning_Cover_Sheet_v2.pdf">
<div class="formLinkContainer" style="top: 660px;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">I-9 Scanning Cover Sheet v2</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>

<a href="https://epwork.ep.corp/wg/ProdPayroll/PayrollForms/I9_Scanning_Request.pdf">
<div id="I9ScanningRequestForm" style="top: 700px;width:430px; height:37px;position: absolute;">
<img class="formIcon" src="https://epwork.ep.corp/wg/ProdPayroll/Images_Decorative/formIcon.png" />
<span class="formTextSpan">I-9 Scanning Request</span>
<div class="opaqueBlock" style=""></div>
</div>
</a>


<div id="FormPreviewPane" style="position: absolute; top: 180px; left: 600px; border: 1px dotted blue; width: 500px; height: 595px; background-color:purple;">
</div>



</div>
</div>


.乳白色块{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；
不透明度：0.5；
左边距：60像素；
宽度：360px；
高度：35px；
背景色：#3D5567；
}
.opaqueBlock:悬停{
边框：1个点#304A63；
}
.formLinkContainer{
宽度：430px；
高度：37像素；
位置：绝对位置；
}
.formLinkContainer:悬停{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=40）”；
不透明度：0.4；
}
#I9ScanningRequestForm:悬停#FormPreviewPane{
背景色：白色；
}
.formTextSpan{
位置：绝对位置；
z指数：1；左边距：70px；
颜色：白色；
页边顶部：1px；
字体系列：“Didact哥特式”！重要；
字体大小：22px！重要；
}
福米孔先生{
高度：34px；
位置：绝对位置；
左边距：13px；
}
img{边框：无；}

您可以使用一些基本的JQuery代码轻松解决此问题：

$("#FormPreviewPane").on("hover", function() {
  $("#I9ScanningRequestForm").css("background-color", "white");
});

您可以使用一些基本的JQuery代码轻松解决此问题：

$("#FormPreviewPane").on("hover", function() {
  $("#I9ScanningRequestForm").css("background-color", "white");
});

你的方法有两个问题

首先，您针对的是
```
#I9ScanningRequestForm
```
元素本身的
```
：hover
```
状态，然后尝试使用
```
+
```
选择器针对紧跟其后的元素。问题是，这只适用于下一个同级元素，而
#FormPreviewPane
是
#I9ScanningRequestForm
的父级的同级（因此您不能用作
#I9ScanningRequestForm
a'base'），但假设结构不会改变，您可以通过改为在
上以父级为目标

其次，您正在设置目标元素内联的背景色，这是的最高级别。要覆盖此设置，您需要使用！重要的声明：


将这两点结合起来，可以通过以下方式设置颜色：
a:last-of-type:hover + #FormPreviewPane {
  background-color: white !important;
}


.opaqueBlock{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；
不透明度：0.5；
左边距：60像素；
宽度：360px；
高度：35px；
背景色：#3D5567；
}
.opaqueBlock:悬停{
边框：1个点#304A63；
}
.formLinkContainer{
宽度：430px；
高度：37像素；
位置：绝对位置；
}
.formLinkContainer:悬停{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=40）”；
不透明度：0.4；
}
a:最后一种类型：悬停+#FormPreviewPane{
背景色：白色！重要；
}
.formTextSpan{
位置：绝对位置；
z指数：1；
左边距：70像素；
颜色：白色；
页边顶部：1px；
字体系列：“Didact哥特式”！重要；
字体大小：22px！重要；
}
福米孔先生{
高度：34px；
位置：绝对位置；
左边距：13px；
}
img{
边界：无；
}



您的方法有两个问题

首先，您的目标是：悬停元素本身的状态，然后尝试使用+
选择器以紧跟其后的元素为目标。问题是，这只适用于下一个同级元素，而FormPreviewPane
是同级元素对#I9ScanningRequestForm
的父级进行初始化（因此您不能
用作#I9ScanningRequestForma'base'），但假设
结构不会改变，您可以通过
改为在上以父级为目标

其次，您正在设置目标元素内联的背景色
，这是的最高级别。要覆盖此设置，您需要使用！重要的声明：


将这两点结合起来，可以通过以下方式设置颜色：
a:last-of-type:hover + #FormPreviewPane {
  background-color: white !important;
}


.opaqueBlock{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；
不透明度：0.5；
左边距：60像素；
宽度：360px；
高度：35px；
背景色：#3D5567；
}
.opaqueBlock:悬停{
边框：1个点#304A63；
}
.formLinkContainer{
宽度：430px；
高度：37像素；
位置：绝对位置；
}
.formLinkContainer:悬停{
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=40）”；
不透明度：0.4；
}
a:最后一种类型：悬停+#FormPreviewPane{
背景色：白色！重要；
}
.formTextSpan{
位置：绝对位置；
z指数：1；
左边距：70像素；
颜色：白色；
页边顶部：1px；
字体系列：“Didact哥特式”！重要；
字体大小：22px！重要；
}
福米孔先生{
高度：34px；
位置：绝对位置；
左边距：13px；
}
img{
边界：无；
}



符号+
表示在html标记中紧跟其后。因此，除非#FormPreviewPane
紧跟在#I9ScanningRequestForm:hover
-它不在您的代码中-代码将无法按预期工作。请尝试删除+
并查看是否有效。@Ihazkode我尝试将其从+更改为~但仍然如此不起作用。还有其他什么可能起作用吗？~
也不起作用，因为.a~.b
表示在同一级别（共享父级）。只需删除+
，不添加任何其他内容。例如：\I9ScanningRequestForm:hover#FormPreviewPane{背景色：白色；}
符号+
表示在html标记中紧跟其后。因此，除非#FormPreviewPane
紧跟在#I9Scanni之后