私はオペラ拡張開発の初心者です。
オペラのFirefox xulオーバーレイに相当するものはありますか?
マウスをテキストの上に置いたときに、一時的なオーバーレイを作成したいと考えています。マウスをテキストから離すと、オーバーレイが変化するか消えるはずです。
私はオペラ拡張開発の初心者です。
オペラのFirefox xulオーバーレイに相当するものはありますか?
マウスをテキストの上に置いたときに、一時的なオーバーレイを作成したいと考えています。マウスをテキストから離すと、オーバーレイが変化するか消えるはずです。
特定のページを操作するには、挿入されたスクリプトを使用する必要があります。これは、という名前のフォルダー内に配置された JavaScript ファイル (実質的には UserScript/UserJS)includes
です。
このファイルには、http://sixrevisions.com/css/css-only-tooltips/ にあるような CSS のみのツールチップのコードを配置し、CSSをページのスタイル要素に添付できます。
この例では、構築するものを提供する必要があります。
// includes/injected.js
window.addEventListener('DOMContentLoaded', function() {
// Set the CSS for the tooltip
var tooltipCSS = '.tooltip {position: relative;}.tooltip span {margin-left: -999em; position: absolute;} .tooltip:hover span {border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;} .classic {padding: 0.8em 1em;} * html a:hover {background: transparent;} .classic {background: #FFFFAA; border: 1px solid #FFAD33; color: #333333;}';
// Set the text for the tooltip
var tooltipText = 'This is a tooltip';
// Add the CSS to the page
var style = document.createElement('style');
style.textContent = tooltipCSS;
document.head.appendChild(style);
// Loop through all links to add "tooltip" class and extra <span>
var links = document.getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].classList.add('tooltip');
links[i].innerHTML += '<span class="classic">' + tooltipText + '</span>';
}
}, false);