Question

在视频右侧的youtube上有一个建议列表。很长一段时间我没有用鼠标悬停在它上面隐藏它：

#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

不是最好的CSS，但我认为它应该有效。首先设置鼠标悬停的行为，然后在设置.perma-hidden时覆盖它。

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

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

Answer 2

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();
    });
})();

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

2 个答案: