爲什麼不懸停在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>

來源

2017-08-22 shampouya

「+」號表示**緊跟在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>

希望這有助於！ :)

來源

2017-08-22 01:47:57

非常感謝！ – shampouya

沒問題！一旦確認問題已解決，請不要忘記[**接受答案**]（https：// stackoverflow。通過點擊投票按鈕下方的灰色檢查 - 將其從「未答覆的問題」隊列中移除，並將問題授予問題提問者和問題答疑者。詢問任何問題後，您可以在15分鐘內完成。當然，在說，你沒有義務標記我的答案（或任何其他人）是正確的，但標記爲已解決的問題有助於保持事情順利進行:) –

您可以輕鬆地解決這個使用一些基本的jQuery代碼：

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

來源

2017-08-22 01:46:08

爲什麼不懸停在CSS/HTML允許我改變另一個div的樣式？

回答

相關問題