www.deepl.com 修改样式，试图改成有道翻译的，deepl那个左右对应高亮，实在是不明显

没有高亮的是class="lmt__source_textarea_overlay__text"

高亮的是class="lmt__source_textarea_overlay__text lmt__source_textarea_overlay__sentence--active"

多了lmt__source_textarea_overlay__sentence--active

 

两条css：

.lmt__source_textarea_overlay .lmt__source_textarea_overlay__sentence--active {

1. color: #0f2b46;
2. background-color: #fff;

}

 

.lmt__source_textarea_overlay .lmt__source_textarea_overlay__sentence--active {

1. visibility: visible !important;
2. position: relative;

}

 

改background-color: #ef8f8f;就很明显了

 

还有就是必须得点击到那个句子才能切换，这个也很不方便

---

 

有道翻译

hover悬停时，class里会添加hover

.input__target__text span.hover {

1. background: #cfe5ff;
2. border-radius:
   1px
   ;

}

 

至于deepl的hover效果，不太好弄，用的是mouseover event，deepl是用的selectionchange event。理论上可以给deepl写个mouseover event的处理函数，在里面添加高亮效果，然后用JavaScript触发selectionchange event，但是这样有点麻烦，有时间再折腾吧

 

 

 

 

// ==UserScript==
// @name         DeepL样式微调
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.deepl.com/translator
// @icon         https://www.google.com/s2/favicons?sz=64&domain=deepl.com
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';
    let css = `
    .lmt__source_textarea_overlay__sentence--active{
        background-color: #ef8f8f !important;
      }
    `
    GM_addStyle(css)
    // Your code here...
})();