Why isn't hovering in css/html allowing me to change the styling of another div?

I'm trying to hover over the I9ScanningRequestForm div to change the background color of the FormPreviewPane div from purple to white. In my Sharepoint 2010 web page, however, this hovering event seems to be ignored. Is there something wrong with my code? How can I control the color of one div by hovering over another div?

Upvotes: 0

Answers (2)

Obsidian Age

Reputation: 42384

There are two problems with your approach.

First, you are targeting the :hover state of the #I9ScanningRequestForm element itself, and then attempting to use the + selector to target the element that immediately follows it. The problem is, this only works for the next sibling element, and #FormPreviewPane is a sibling of the parent of #I9ScanningRequestForm (the <a> tag).

Unfortunately, there's no parent selector in CSS (so you can't use as #I9ScanningRequestForm a 'base'), though assuming the structure doesn't change, you can work around this by instead targeting the parent <a> tag with the pseudo-selector :last-of-type on the <a> tag. If it does change, you can always use :nth-of-type instead.
Second, you're setting the background-color of the target element inline, which is the highest possible level of specificity. To override this, you'll need to use the !important declaration:

Combining these two points, the colour can be set with the following:

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>

Hope this helps! :)

Upvotes: 2

user8351394

Reputation:

You can easily solve this using some basic JQuery code:

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

Upvotes: 1

Why isn&#39;t hovering in css/html allowing me to change the styling of another div?

Answers (2)

Related Questions

Why isn't hovering in css/html allowing me to change the styling of another div?