Is there a way to show a kind of tooltip with low opacity on hover in js or css?-CodePudding

I want it so that on the hover of "show", the iframe shows at half opacity, and on click it shows full, I have something like this; So when you x out of the iframe, and hover on the show more, it shows a little tooltip thing of the iframe that shows up on click of the 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>

But instead, the button of show is being half opacity, any solutions with JavaScript or CSS? Here is the website; https://proking73.github.io/P.W.I.L-with_Sis/ It's in the bottom left.

CodePudding user response：

#id:hover{
opacity:60%;
}

It decreases opacity of any object including img.

CodePudding user response：

I found an answer, with javascript. I use event listeners to make the display and opacity set on the iframe on mouseover, and on mouseout I made it hide.

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>