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

【问题标题】：Why isn't hovering in css/html allowing me to change the styling of another div?为什么不能在 css/html 中悬停允许我更改另一个 div 的样式？
【发布时间】：2017-08-22 09:52:57
【问题描述】：

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

【问题讨论】：

+ 符号表示 html 标记中的紧接在之后。因此，除非#FormPreviewPane 紧跟在#I9ScanningRequestForm:hover 之后——它不在您的代码中——否则代码将无法按预期工作。尝试删除+ 看看是否可行。
@Ihazkode 我尝试将其从 + 更改为 ~ ，但仍然无效。还有什么可以解决这个问题的吗？
~ 也不起作用，因为.a ~ .b 表示同一级别（共享父级）。只需删除+，不要添加任何其他内容。像这样：#I9ScanningRequestForm:hover #FormPreviewPane { background-color: white; }

标签： html css hover

【解决方案1】：

你的方法有两个问题。

首先，您要定位#I9ScanningRequestForm 元素本身的:hover 状态，然后尝试使用+ 选择器来定位紧随其后的元素。问题是，这只适用于下一个 sibling 元素，#FormPreviewPane 是 #I9ScanningRequestForm 的 parent 的兄弟（<a> 标签）。

不幸的是，有 no parent selector in CSS（所以你不能用作#I9ScanningRequestForm'base'），尽管假设结构不会改变，您可以改为解决此问题使用伪选择器定位父 <a> 标签 :last-of-type 在<a> 标签上。如果确实发生了变化，您始终可以改用 :nth-of-type。
其次，您要设置目标元素inline的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>

希望这会有所帮助！ :)

【讨论】：

没问题！一旦您确认您的问题已经解决，请不要忘记点击投票按钮下方的灰色复选标记accept an answer - 这会将其从“未回答的问题”队列中删除，并为两个提问者和回答者。在提出任何问题后 15 分钟，您就可以做到这一点。当然，这么说，您没有义务将我（或其他任何人）的答案标记为正确，尽管将问题标记为已解决有助于保持事情顺利进行:)

【解决方案2】：

您可以使用一些基本的 JQuery 代码轻松解决这个问题：

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

【讨论】：