有没有办法在 js 或 css 中悬停时显示一种不透明度低的工具提示？

Posted 2023-03-06

【中文标题】有没有办法在 js 或 css 中悬停时显示一种不透明度低的工具提示？

【英文标题】：Is there a way to show a kind of tooltip with low opacity on hover in js or css?

【发布时间】：2021-12-16 14:35:59

【问题描述】：

我想要它，以便在“显示”悬停时，iframe 显示为一半不透明度，单击时显示为全透明，我有这样的东西；因此，当您退出 iframe 并将鼠标悬停在 show more 上时，它会显示 iframe 的一个小工具提示内容，在点击 show more 时显示。

document.querySelector("#xout").addEventListener("click", function() 
  document.getElementById("xout").style.display = "none";
  document.getElementById("adlike").style.display = "none";
  document.getElementById("showcat").style.display = "block";
);

document.querySelector("#showcat").addEventListener("click", function() 
  document.getElementById("wrapperAd").querySelector(":hover").style.opacity = "0.5";
  document.getElementById("xout").style.display = "block";
  document.getElementById("adlike").style.display = "block";
  document.getElementById("showcat").style.display = "none";
);

.iframes 
  box-sizing: inherit;
  position: fixed;
  height: 22vh;
  overflow-x: hidden;
  bottom: 0;
  left: 0;
  width: 50%;
  --iframemaincolor: hsl(150, 64%, 29%);
  border: 5px var(--iframemaincolor);
  border-style: outset inset;


.catlink 
  background-color: var(--iframemaincolor);


#xout 
  transform: translate(25%, -70%);
  float: right;
  color: transparent;
  -webkit-background-clip: text;
  background-color: hsl(0, 30%, 70%);
  width: min-content;
  height: min-content;
  position: relative;
  text-shadow: -2px -2px red;



/*is in iframe, max seperate elemnti in same parent.*/

#xout:hover 
  text-decoration: wavy;
  color: red;
  text-shadow: none;


#xout::selection 
  color: transparent;
  background-color: transparent;
  display: none;


#wrapperAd 
  position: fixed;
  height: 22vh;
  float: left;
  width: 53%;
  box-sizing: border-box;
  bottom: 0;
  left: 0;


#showcat 
  letter-spacing: 0.5vw;
  word-spacing: 1vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: absolute;
  bottom: 0;
  background-color: hsl(0, 0%, 80%);
  border: .3vh solid hsl(0, 0%, 15%);
  left: 0;
  border-radius: 1vw;
  right: 0;
  padding-inline: 1vw;
  width: max-content;
  height: 10%;
  display: none;


.catshowX:hover 
  opacity: 0.9;
  cursor: pointer;

<div id="wrapperAd">
  <iframe src="catLink.html" class="iframes catlink" id="adlike" scrolling="no">
       </iframe>
  <h1 id="xout" class="catshowX">&cross;</h1>
  <div id="showcat" class="catshowX">Show &UpArrow;</div>
</div>
</div>

但是，show 的按钮是半透明的，有 javascript 或 CSS 的解决方案吗？这是网站； https://proking73.github.io/P.W.I.L-with_Sis/在左下角。

【参考方案1】：

我用 javascript 找到了答案。我使用事件侦听器在鼠标悬停时在 iframe 上设置显示和不透明度，在鼠标悬停时将其隐藏。

document.querySelector("#xout").addEventListener("click", function() 
  document.getElementById("xout").style.display = "none";
  document.getElementById("adlike").style.display = "none";
  document.getElementById("showcat").style.display = "block";
);
document.querySelector("#showcat").addEventListener("mouseover", function() 
  document.getElementById("adlike").style.opacity = "0.5";
  document.getElementById("adlike").style.display = "block";
);
document.querySelector("#showcat").addEventListener("mouseout", function() 
  document.getElementById("adlike").style.display = "none";
);
document.querySelector("#showcat").addEventListener("click", function() 
  document.getElementById("wrapperAd").querySelector(":hover").style.opacity = "0.5";
  document.getElementById("xout").style.display = "block";
  document.getElementById("adlike").style.display = "block";
  document.getElementById("showcat").style.display = "none";
);

.iframes 
  box-sizing: inherit;
  position: fixed;
  height: 22vh;
  overflow-x: hidden;
  bottom: 0;
  left: 0;
  width: 50%;
  --iframemaincolor: hsl(150, 64%, 29%);
  border: 5px var(--iframemaincolor);
  border-style: outset inset;


.catlink 
  background-color: var(--iframemaincolor);


#xout 
  transform: translate(25%, -70%);
  float: right;
  color: transparent;
  -webkit-background-clip: text;
  background-color: hsl(0, 30%, 70%);
  width: min-content;
  height: min-content;
  position: relative;
  text-shadow: -2px -2px red;



/*is in iframe, max seperate elemnti in same parent.*/

#xout:hover 
  text-decoration: wavy;
  color: red;
  text-shadow: none;


#xout::selection 
  color: transparent;
  background-color: transparent;
  display: none;


#wrapperAd 
  position: fixed;
  height: 22vh;
  float: left;
  width: 53%;
  box-sizing: border-box;
  bottom: 0;
  left: 0;


#showcat 
  letter-spacing: 0.5vw;
  word-spacing: 1vw;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: absolute;
  bottom: 0;
  background-color: hsl(0, 0%, 80%);
  border: .3vh solid hsl(0, 0%, 15%);
  left: 0;
  border-radius: 1vw;
  right: 0;
  padding-inline: 1vw;
  width: max-content;
  height: 10%;
  display: none;


.catshowX:hover 
  opacity: 0.9;
  cursor: pointer;

<div id="wrapperAd">
  <iframe src="catLink.html" class="iframes catlink" id="adlike" scrolling="no">
       </iframe>
  <h1 id="xout" class="catshowX">&cross;</h1>
  <div id="showcat" class="catshowX">Show &UpArrow;</div>
</div>
</div>