I am trying to create a mouseover effect in html on a content block in the Wordpress code editor. I want an icon to change color on mouseover and change back on mouseout so I'm referencing two different colored icon pictures. I'm also not sure what best practices are for spacing/indent; sorry if this is messy or hard to read.

Here is the code I'm using to try to accomplish this:

HTML
<!-- wp:image {"id":1111} -->
<figure class="wp-block-image"><img src=".png"onmouseover="this.src='//wp-content/uploads/2019/08/image2.png'"onmouseout="this.src='//wp-content/uploads/2019/08/image1.png"' alt="alttext" class="wp-image-1111"/></figure>
<!-- /wp:image -->

I am trying to create a mouseover effect in html on a content block in the Wordpress code editor. I want an icon to change color on mouseover and change back on mouseout so I'm referencing two different colored icon pictures. I'm also not sure what best practices are for spacing/indent; sorry if this is messy or hard to read.

Here is the code I'm using to try to accomplish this:

HTML
<!-- wp:image {"id":1111} -->
<figure class="wp-block-image"><img src="https://website/wp-content/uploads/2019/08/image1.png"onmouseover="this.src='https://website//wp-content/uploads/2019/08/image2.png'"onmouseout="this.src='https://website//wp-content/uploads/2019/08/image1.png"' alt="alttext" class="wp-image-1111"/></figure>
<!-- /wp:image -->

• images
• html
• block-editor

Share Improve this question asked Aug 28, 2019 at 19:44 JenTen10JenTen10 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You were very close. You just had a single-quote swapped with a double-quote after the onmouseover.

<figure class="wp-block-image">
    <img src="https://website/wp-content/uploads/2019/08/image1.png" onmouseover="this.src='https://website//wp-content/uploads/2019/08/image2.png';" onmouseout="this.src='https://website/wp-content/uploads/2019/08/image1.png';" alt="alttext" class="wp-image-1111"/>
</figure>

I usually place semi-colons after the single-quotes to make it easier to tell when your quotes are balanced, whether Javascript requires it, or not.