Using script editor to apply hover effects to certain images

Question

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

Answer 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"
}