javascript - 如何在悬停时在 Wordpress 更改图标中制作自定义 TinyMCE 按钮

Question

我为 Wordpress 编辑器创建了 TinyMCE 插件来插入 Youtube 视频。一切正常，除了这个按钮没有悬停状态(就像默认按钮一样)。我研究了代码并发现了一个区别——默认按钮是带有背景图像 Sprite 的跨度，而我的自定义按钮是一个普通图像。 TinyMCE addButton() 函数中没有插入跨度的选项，只有图像:

ed.addButton('p2_youtube_button', {
    title : 'Insert Youtube video',
    cmd : 'mceYoutube',
    image: url + '/shortcode-youtube.png'
});

有没有办法解决这个小问题？

为了说明它的外观(红色的 Youtube 图标应该是灰色的，悬停时变成红色):

http://d.pr/aszC

Answer 1

我注意到 Crayon Syntax Highlighter插件已设法做到这一点。需要阅读一些代码，我在/wp-content/plugins/crayon-syntax-highlighter/util/tag-editor/crayon_tinymce.js 中找到了 tinyMCE 特定部分。我希望这会有所帮助。

引起高亮的样式是here :

.wp_themeSkin span.mce_crayon_tinymce {
    background: url(images/crayon_tinymce.png);
}
.wp_themeSkin .mceButtonEnabled:hover span.mce_crayon_tinymce,
.wp_themeSkin .mceButtonActive span.mce_crayon_tinymce {
    background-position: -20px 0;
}

图像使用与其他 TinyMCE 图标相同的大小: