css 我怎样去掉透明的一面？

70gysomp 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(131)

I have put in the first: the normal image然后我把他们每个人在Photoshop中分割成png文件。Then I put the first split images:Then the second picture:然后其他人。Then I got this look:这样，当我把鼠标放在其中一个，其他人消失但最后一张图像的透明方面影响其他人，我如何删除透明的一面？

网址：

<Html>
    <head>
        <title>Class 2bac svt-2</title>
        <link rel="stylesheet" href="Css.css">
    </head>
    <body>
        <center>
            <h1 class="Title">2Bac-Svt-II</h1>
            <div>
                <img src="Images/All-black&White.png" alt="All" class="All">
                <img id="Gays" src="Images/A7meed.png" alt="All" class="A7meed">
                <img id="Gays" src="Images/Wahid.png" alt="All" class="Wahid">
                <img id="Gays" src="Images/3azi.png" alt="All"Class="3azi">
                <img id="Gays" src="Images/3chir Piza.png" alt="All"Class="3chir piza">
                <img id="Gays" src="Images/Joker Dial Maryoula.png" alt="All" class="JDM">
                <img id="Gays" src="Images/Mister.png" alt="All" class="Mister">
                <img id="Gays" src="Images/Piza.png" alt="All" class="Piza">
                <img id="Gays" src="Images/Naser.png" alt="All" class="Naser">
                <img id="Gays" src="Images/Nasiri.png" alt="All" class="Nasiri">
                <img id="Gays" src="Images/Taha.png" alt="All" class="Taha">
                <img id="Gays" src="Images/Jawad.png" alt="All" class="Jawad">
                <img id="Gays" src="Images/Hedaya 3ad Lmath.png" alt="All" class="H3m">
                <img id="Gays" src="Images/Hamoudo.png" alt="All" class="Hamodo">
                <img id="Gays" src="Images/Himi.png" alt="All" class="Himi">
                <img id="Gays" src="Images/Balon.png" alt="All" class="Balon">
                <img id="Gays" src="Images/M5inzaaaaa.png" alt="All" class="M5inza">
                <img id="Gays" src="Images/Monir.png" alt="All" class="Monir">
                <img id="Gays" src="Images/Carasko.png" alt="All" class="Carasko">
                <img id="Gays" src="Images/Francai.png" alt="All" class="Francai">
            </div>
            <label>Zoom 100% !!!! </label>
        </center>
    </body>
</Html>

信用评级：

body{
    background-color: black;
}
.title{
    color: white;
    font-family: fantasy;
}
img[id="Gays"]{
    height: 70%;
    display: block;
    margin-top: -518.7px;
}
.All{
    display: block;
    height: 70%;
}
label{
    color: red;
}
@media screen and (max-width:1000px){
    img[id="Gays"]{
        height: 70%;
        display: block;
        margin-top: -511.7px;
    }
}

css

来源：https://stackoverflow.com/questions/74924328/how-do-i-remove-the-transparent-side

1条答案

按热度按时间

ni65a41a1#

你可以使用鼠标上的enter事件并设置项目（除了悬停的项目）为“hide”类来实现这一点。css中的Hide类会将可见性设置为hidden。
然后使用鼠标离开事件将所有内容再次设置为可见
不能给你一个例子与您的图像，但你应该能够找出它使用下面的片段，使用文本代替。

// hide all elements in div apart from the one that is hovered
function hoveredFunc(ele) {
    let div = document.getElementById("div");
  let contentsOfDiv = div.getElementsByTagName("h1");
    for(let i = 0; i < contentsOfDiv.length; i++) {
    let item = contentsOfDiv[i];
    if(ele !== item) {
        item.setAttribute("class", "hide");
    }
  }
}

// set all to visible in div
function leaveFunc() {
    let div = document.getElementById("div");
  let contentsOfDiv = div.getElementsByTagName("h1");
    for(let i = 0; i < contentsOfDiv.length; i++) {
    let item = contentsOfDiv[i];
    item.removeAttribute("class", "hide");
  }
}

.hide {
  visibility: hidden;
}

<div id="div">
  <h1 onmouseenter="hoveredFunc(this)" onmouseleave="leaveFunc()">
  Test
  </h1>
  
  <h1 onmouseenter="hoveredFunc(this)" onmouseleave="leaveFunc()">
  Test 2
  </h1>
  
  <h1 onmouseenter="hoveredFunc(this)" onmouseleave="leaveFunc()">
  Test 3
  </h1>
</div>

赞(0）回复(0）举报 2022-12-30

我来回答

css 我怎样去掉透明的一面？

1条答案

相关问题

热门标签

最新问答