0

I'm trying to apply some hover effects to some images on a page. I'm using the Modern script editor from here. I can't get the code right. The image is in this

<div class="cdbdescholderdesc_07f89b9d" style="display: none; height: 1px;padding-top: 0px; margin-top: 0px; padding-bottom: 15px; margin-bottom: 0px;"><span>test</span></div>

I've tried various code, but I can't get anything to work. Initially, I just want to change the background color on hover. Any idea thanks

1

You should be able to use a pseudo class selector in your script editor web part to select that element and apply your background color on hover.

<style>
  .cdbdescholderdesc_07f89b9d:hover {
      background-color: gray;
   } 
</style>

EDIT: Per your request to change properties of one element based on hovering another element:

HTML:

<div class="myDiv">
   Test
</div>
<div class="divToChange">
   Test Div 2
</div>

Javascript:

document.querySelector('.myDiv').addEventListener('mouseover', mouseOver);

function mouseOver(){
  document.querySelector('.divToChange').style.backgroundColor = "red"
}
  • Though if if you could show the syntax for changing the properties of one element when another is hovered over that would be even more helpful. – Hydrogen Sep 13 '18 at 17:17
  • Updated post to show one way of doing this. – Nate Sep 13 '18 at 18:34
  • thank you... and that can just go in a script editor? – Hydrogen Sep 14 '18 at 8:25
  • Yes, it's just regular ole javascript. – Nate Sep 14 '18 at 20:40
  • As they say in my country... Fandabidozi! – Hydrogen Sep 17 '18 at 7:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.