javascript - 当 css 存在特定类时隐藏 youtube 侧边栏

Question

在 youtube 上，视频右侧有一个建议列表。很长一段时间以来，当鼠标没有悬停在它上面时，我一直使用这个 css 来隐藏它:

#watch7-sidebar, .watch-sidebar, #related {
    opacity: 0;
}

#watch7-sidebar::hover, .watch-sidebar:hover, #related:hover  {
    opacity: 1;
}

最近我写了一个脚本来添加一个切换按钮以在切换按钮打开时禁用悬停。该按钮在#watch7-sidebar 上切换一个类(.perma-hidden)。

我试过这个 css 和注释掉的行:

#watch7-sidebar {
    display: none;
    /*visibility: hidden;*/
    /*pointer-events: none;*/
    opacity: 0;
}

#watch7-sidebar:hover:not(.perma-hidden) {
    display: block;
    /*visibility: visible;*/
    /*pointer-events: auto;*/
    opacity: 1;
}

我明白为什么它不起作用，但无法找出可行的解决方案。那是;如果鼠标悬停在建议列表上，建议列表将可见，除非类 .perma-hidden 存在。

仅仅隐藏建议列表是不够的，您仍然可以点击列表条目。

Answer 1

OP 的解决方案。

我想通了。忘记了 css 的排序优先级。
以下是为感兴趣的人提供的说明。
使用 Stylebot [0] 应用 css 和 Tampermonkey [1] 运行脚本，在订阅按钮旁边添加切换按钮。

[0] https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
[1] https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo

对于 Stylebot 的 css:

#watch7-sidebar {
    opacity: 0;
}

#watch7-sidebar.perma-hidden {
    display: none;
    opacity: 0;
}

#watch7-sidebar:hover {
    opacity: 1;
}

对于 Tampermonkey，用户脚本:

// ==UserScript==
// @name         Youtube - perma-hidden
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://www.youtube.com/watch?v=*
// @match        https://www.youtube.com/watch?v=*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    // TODO: save state.
    function appendSwitch() {
        var ws_container = document.getElementById('watch7-subscription-container');

        var span_tag = document.createElement('span'); // Toggle
        span_tag.className = 'yt-uix-checkbox-on-off';

        var span_input_tag = document.createElement('input');
        span_input_tag.id = 'suggestion-list-checkbox';
        span_input_tag.type = 'checkbox';

        var span_label_tag = document.createElement('label');
        span_label_tag.for = 'suggestion-list-checkbox';
        span_label_tag.id = 'suggestion-list-checkbox-label';

        var span_label_span_checked_tag = document.createElement('span');
        span_label_span_checked_tag.className = 'checked';

        var span_label_span_toggle_tag = document.createElement('span');
        span_label_span_toggle_tag.className = 'toggle';

        var span_label_span_unchecked_tag = document.createElement('span');
        span_label_span_unchecked_tag.className = 'unchecked';

        span_label_tag.appendChild(span_label_span_checked_tag);
        span_label_tag.appendChild(span_label_span_toggle_tag);
        span_label_tag.appendChild(span_label_span_unchecked_tag);

        span_tag.appendChild(span_input_tag);
        span_tag.appendChild(span_label_tag);
        ws_container.appendChild(span_tag);

        span_input_tag.addEventListener('click', toggleSwitch);
    }

    function toggleSwitch() {
        let suggestion_list = document.querySelector('#watch7-sidebar');
        if (suggestion_list) {
            suggestion_list.classList.toggle('perma-hidden');
        }
    }

    function waitForElementId(elementId, callBack) {
        window.setTimeout(function() {
            var element = document.getElementById(elementId);
            if (element) {
                callBack(elementId, element);
            } else {
                waitForElementId(elementId, callBack);
            }
        }, 500);
    }

    waitForElementId('watch7-subscription-container', function() {
        appendSwitch();
    });
})();