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 Answer 1

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"
}
5
  • 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
    Commented Sep 13, 2018 at 17:17
  • Updated post to show one way of doing this.
    – Nate
    Commented Sep 13, 2018 at 18:34
  • thank you... and that can just go in a script editor?
    – hydrogen
    Commented Sep 14, 2018 at 8:25
  • Yes, it's just regular ole javascript.
    – Nate
    Commented Sep 14, 2018 at 20:40
  • As they say in my country... Fandabidozi!
    – hydrogen
    Commented Sep 17, 2018 at 7:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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