Warum schwebt nicht in CSS/HTML, so dass ich das Styling eines anderen Div ändern kann?

Ich versuche, über das I9ScanningRequestForm div zu schweben, um die Hintergrundfarbe des FormPreviewPane div von lila nach weiß zu ändern. Auf meiner Sharepoint 2010-Webseite scheint dieses Hover-Ereignis jedoch ignoriert zu werden. Stimmt etwas mit meinem Code nicht? Wie kann ich die Farbe von einem div steuern, indem ich über einem anderen div schwebe?Warum schwebt nicht in CSS/HTML, so dass ich das Styling eines anderen Div ändern kann?

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

Quelle

2017-08-22 shampouya

Das '+' Zeichen bedeutet ** direkt nach ** im HTML-Markup. Wenn "# FormPreviewPane" nicht unmittelbar nach "# I9ScanningRequestForm: hover" steht - was nicht in Ihrem Code enthalten ist - funktioniert der Code nicht wie vorgesehen. Versuchen Sie, das '+' zu entfernen und sehen Sie, ob das funktioniert. –

@Ihazkode Ich habe versucht, es von + zu ~ zu ändern und das hat immer noch nicht funktioniert. Gibt es noch etwas, das den Trick machen könnte? – shampouya

'~' wird auch nicht funktionieren, da '.a ~ .b' bedeutet auf der gleichen Ebene (geteilte Eltern). Entfernen Sie einfach das '+' und fügen Sie nichts hinzu. Wie so: '# I9ScanningRequestForm: Hover #FormPreviewPane { background-color: weiß; } ' –

Es gibt zwei Probleme mit Ihrem Ansatz.

Zuerst Sie zielen die :hover Zustand des #I9ScanningRequestForm Element selbst, und dann versucht, verwenden, um die + Selektor das Element zum Ziel, die unmittelbar folgt. Das Problem ist, dies funktioniert nur für das nächste Geschwister Element, und #FormPreviewPane ist ein Geschwister der Eltern von #I9ScanningRequestForm (die <a> Tag).

Leider gibt es no parent selector in CSS (so können Sie nicht Verwendung als #I9ScanningRequestForm eine ‚Basis‘), obwohl unter der Annahme die Struktur nicht ändert, können Sie mit, indem stattdessen Targeting den übergeordneten <a> Tages dieses Problem umgehen der Pseudoselektor :last-of-type auf dem <a> Tag. Wenn es sich ändert, können Sie stattdessen immer :nth-of-type verwenden.
Zweitens sind Setzen Sie die background-color des Zielelements Inline, die das höchstmögliche Maß an specificity ist. Außer Kraft setzen diese, müssen Sie die !important Deklaration verwenden:

diese beiden Punkte kombinieren, können die Farbe eingestellt werden, mit den folgenden:

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>

Hoffe, das hilft! :)

Quelle

2017-08-22 01:47:57

Vielen Dank! – shampouya

Kein Problem! Sobald Sie bestätigt haben, dass Ihr Problem gelöst wurde, vergessen Sie nicht, [** eine Antwort zu akzeptieren **] (https: // stackoverflow.com/help/someone-answer) durch Klicken auf den grauen Haken unter den Abstimmknöpfen - dies entfernt ihn aus der Warteschlange "Unbeantwortete Fragen" und vergibt die Reputation sowohl an den Fragesteller als auch an den Fragesteller. Sie können das 15 Minuten nach dem Stellen einer Frage tun. Natürlich sind Sie nicht verpflichtet, meine Antwort (oder die von jemand anderem) als richtig zu markieren, obwohl das Markieren einer Frage, wie sie gelöst wird, dazu beiträgt, dass die Dinge reibungslos funktionieren :) –

Sie können dies leicht lösen einige grundlegende JQuery Code:

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

Quelle

2017-08-22 01:46:08

Warum schwebt nicht in CSS/HTML, so dass ich das Styling eines anderen Div ändern kann?

Antwort

Verwandte Themen