I9ScanningRequestForm

I9ScanningRequestForm

关注
发信
关注(28)粉丝(399)

html - 为什么不将鼠标悬停在CSS/HTML中允许我更改另一个div的样式？

我试图将鼠标悬停在I9ScanningRequestForm div上，以将FormPreviewPane div的背景颜色从紫色更改为白色。但是，在我的Sharepoint 2010网页上，此悬浮事件似乎被忽略了。我的代码有问题吗？如何将鼠标悬停在另一个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>

最佳答案

您的方法有两个问题。


首先，您要定位:hover元素本身的#I9ScanningRequestForm状态，然后尝试使用+选择器定位紧随其后的元素。问题是，这仅适用于下一个同级元素，而#FormPreviewPane是#I9ScanningRequestForm父级（<a>标记）的同级。

不幸的是，有no parent selector in CSS（所以您不能
用作#I9ScanningRequestForm一个“基础”），尽管假设
结构不会改变，您可以改为解决此问题
使用伪选择器定位父<a>标签
:last-of-type标记上的<a>。如果确实发生更改，则始终可以使用:nth-of-type代替。
其次，您要内联设置目标元素的background-color，这是specificity的最高级别。要覆盖它，您需要使用!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>





希望这可以帮助！ :)

10-06 01:12
Powered by LMLPHP ©2024 I9ScanningRequestForm 0.024190