为什么不悬停在CSS/HTML允许我改变另一个div的样式？

问题描述：

我想将鼠标悬停在I9ScanningRequestForm div上，将FormPreviewPane div的背景颜色从紫色更改为白色。然而，在我的Sharepoint 2010网页中，这个悬停事件似乎被忽略了。我的代码有问题吗？如何通过悬停在另一个div上来控制一个div的颜色？为什么不悬停在CSS/HTML允许我改变另一个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>

“+”号表示**紧跟在html标记后的**之后。因此，除非'＃FormPreviewPane'恰好在'＃I9ScanningRequestForm：hover'之后 - 它不在您的代码中 - 否则代码将无法按预期工作。尝试删除'+'，看看是否有效。 –

@Ihazkode我试着将它从+更改为〜，但仍然无效。还有什么可以做的伎俩？ – shampouya

'〜'也不会起作用，因为'.a〜.b'表示同一级别（共享父级）。只要删除'+'，不要添加任何其他内容。像这样：'＃I9ScanningRequestForm：hover #FormPreviewPane { background-color：white; }' –

答

有两个问题你的方法。

首先，你的目标#I9ScanningRequestForm元素本身的:hover状态，然后尝试使用+选择的目标是紧随其后的元素。问题是，这只适用于下一个同级元素，并且#FormPreviewPane是父级的#I9ScanningRequestForm（<a>标签）的兄弟姐妹。

不幸的是，有no parent selector in CSS（所以你不能作为#I9ScanningRequestForm一个“基地”），但假设结构不改变，你可以解决此通过，而不是与目标父<a>标签伪选择器 :last-of-type上的<a>标签。如果确实发生变化，您可以始终使用:nth-of-type。
其次，你设置的目标元素直列，这是specificity可能的*别的background-color。要覆盖这一点，你需要使用!important声明：

结合这两点，颜色可以进行以下设置：

a:last-of-type:hover + #FormPreviewPane { 
    background-color: white !important; 
}

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

 
a:last-of-type:hover + #FormPreviewPane { 
 
    background-color: white !important; 
 
} 
 

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

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

希望这有助于！ :)

非常感谢！ – shampouya

没问题！一旦确认问题已解决，请不要忘记[**接受答案**]（https：// *。通过点击投票按钮下方的灰色检查 - 将其从“未答复的问题”队列中移除，并将问题授予问题提问者和问题答疑者。询问任何问题后，您可以在15分钟内完成。当然，在说，你没有义务标记我的答案（或任何其他人）是正确的，但标记为已解决的问题有助于保持事情顺利进行:) –

答

您可以轻松地解决这个使用一些基本的jQuery代码：

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

为什么不悬停在CSS/HTML允许我改变另一个div的样式？

相关推荐