尝试使用古腾堡编辑器在html中创建鼠标悬停效果

我试图在Wordpress代码编辑器的内容块上创建html中的鼠标悬停效果。我想要一个图标来改变鼠标上的颜色，然后再改变鼠标上的颜色，所以我引用了两个不同颜色的图标图片。我也不确定间距/缩进的最佳实践是什么；抱歉，如果这是混乱或难以阅读。

下面是我用来尝试实现这一点的代码：

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

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

在添加Header.php时，WooCommerce商店页面中没有显示HTML代码吗？

我在标题中添加了一些代码。php，但它不会显示在商店页面中。它正在显示所有其他页面。 if( is_home() || ! $ed_section || ! ( is_front_page() || is_page_template( \'template-home.php\' ) ) ){ echo \'<div class = \"container\"><div id=\"content\" class=\"site-content\">

相关推荐

在添加Header.php时，WooCommerce商店页面中没有显示HTML代码吗？