Masquage de la barre latérale youtube quand une classe spécifique existe avec css [Self résolu]

Question

Sur youtube à droite d'une vidéo, il y a une liste de suggestions. Pendant longtemps, je l'ai utilisé ce pour cacher css lorsqu'ils ne sont pas la souris planant au-dessus il:

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

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

Récemment j'ai écrit un script pour ajouter un bouton à bascule pour désactiver le vol stationnaire si le bouton à bascule est activée. Le bouton bascule une classe (.perma-hidden) sur # watch7-sidebar.

J'ai essayé ce css et les lignes commentées:

#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; 
} 

Je peux voir pourquoi cela ne fonctionne pas, mais ne peut pas trouver une solution qui fonctionnent. C'est; La liste des suggestions sera visible si la souris survole la souris sauf si la classe .perma-hidden est présente. Il suffit de masquer la liste des suggestions, vous pouvez toujours cliquer sur les entrées de la liste.

Mise à jour:

I figured it out. J'ai oublié la priorité de commande de css.
Voici les instructions pour ceux qui sont intéressés.
En utilisant Stylebot [0] pour appliquer le css et Tampermonkey [1] pour exécuter le script qui ajoute le bouton bascule à côté du bouton d'abonnement.

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

Pour Stylebot le css:

#watch7-sidebar { 
    opacity: 0; 
} 

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

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

Pour Tampermonkey le userscript:

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

Answer 1

Pas le meilleur CSS, mais je pense ça devrait marcher. Vous devez d'abord définir le comportement du survol de la souris, puis le remplacer lorsque le paramètre .perma-hidden est défini.

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

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