如何用js控制让鼠标经过的内容全部显示

180 阅读1分钟
// ==UserScript==
// @name         b站的收藏夹悬浮才显示的内容加个button点击全部显示
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  因为我需要看到作者,所以才想做这个功能
// @author       xiaoxiami
// @match        https://space.bilibili.com/*/favlist?*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        unsafeWindow
// @grant        GM_addStyle
// ==/UserScript==

(function() {
     setTimeout(() => {
         let url = window.location.href;
         // 默认是不显示的
         let flag = false;
         let playPosition =document.getElementsByClassName("favInfo-details")[0];
         let getHoverContent = `<button id="getHoverContent">控制显示和隐藏悬浮内容<button>`
         playPosition.insertAdjacentHTML('afterend',`${getHoverContent}`);
         let jianTingButton = document.getElementById("getHoverContent");
         jianTingButton.addEventListener("click", ()=>{
             let list = document.getElementsByClassName("meta-mask")
             if(!flag){
                 for(let i=0;i<list.length;i++){
                     list[i].style.opacity=1
                 }
                 flag = true
             }else {
                 for(let i=0;i<list.length;i++){
                     list[i].style.opacity=0
                 }
                 flag = false
             }

          })
     },2000)
    
})();
// 参考文章https://www.jianshu.com/p/d3f5d9565886
GM_addStyle(`
  #getHoverContent {
     background-color: skyblue;
     height: 30px;
  }
  #getHoverContent+button {
     display:none
  }
 `)