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