如何在悬停时使Wordpress中的自定义TinyMCE按钮更改图标

Question

我为Wordpress编辑器创建了TinyMCE插件以插入Youtube视频.一切正常,除了这个按钮没有悬停状态(就像默认按钮一样).我探索了代码,发现了一个区别 - 默认按钮是带有背景图像精灵的跨度,我的自定义按钮是一个普通的图像.在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特定的部分.我希望这有帮助.

引起亮点的风格在这里:

.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图标相同的大小: