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

标签 html css hover

我试图将鼠标悬停在 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>

最佳答案

您的方法有两个问题。

  • 首先，您的目标是 :hover #I9ScanningRequestForm 的状态元素本身，然后尝试使用 +选择器以紧随其后的元素为目标。问题是，这仅适用于下一个 sibling 元素，并且 #FormPreviewPane是#I9ScanningRequestForm 的父级 的 sibling (<a> 标签)。

    不幸的是，有 no parent selector in CSS (所以你不能 用作 #I9ScanningRequestForm一个“基地”)，虽然假设 结构不会改变，您可以通过以下方式解决此问题 针对 parent <a>用伪选择器标记 <强> :last-of-type 在 <a> 上标签。如果确实发生变化，您可以随时使用 :nth-of-type 代替。

  • 其次，您要设置 background-color目标元素的 inline，这是 的最高可能级别 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>

希望对您有所帮助! :)

关于html - 为什么悬停在 css/html 中不允许我更改另一个 div 的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45807691/

上一篇：css - 使用引用元素上的属性移动(样式)标记

下一篇：c# - 在使用 bot 框架时，如何设计 skype for business html 消息的样式？

相关文章：

html - 悬停时背景颜色的不透明度

javascript - 是否可以在 Canvas 的同一路径上使用两种不同的笔触样式？

javascript - bootstrap pull-right 类和行类

html - 如何正确调整 svg 的大小？

css - 是否可以使 LI 元素在 UL 中垂直溢出？

javascript - JQuery 悬停和 SlideToggle

文本框之间的 Javascript 计算

html - 修复菜单展开时滚动内容的问题

html - 一个简单的 CSS 边距或填充在 Internet Explorer 中不起作用

html - 如何通过将鼠标悬停在另一个 div 图像上来将 div 图像更改为另一个图像？

©2024 IT工具网  联系我们