有沒有辦法在js或css中懸停時顯示一種低不透明度的工具提示？

我想要它，以便在“顯示”懸停時，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/PWIL-with_Sis/在左下角。

uj5u.com熱心網友回復：

#id:hover{
opacity:60%;
} 

它降低了包括 img 在內的任何物件的不透明度。

uj5u.com熱心網友回復：

我用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>

標籤：javascript html css 内嵌框架 不透明度

上一篇：如何使用css和react.js將影像和文本并排對齊

下一篇：如何將塊放在垂直線上作為css中的設計？