Question

我正在尝试更改单击时每张图像的颜色，但是由于位置和z-index彼此重叠，因此无法正确选择它们。您可以通过单击右上角的代码来检查代码的颜色是否改变...尝试了CSS的不同方法，而不是JavaScript ... JavaScript的新手。

   body,div,p,h1,h2,h3,h4,h5,h6,span {
     margin: 0;
}
 div.nav {
     height: 100px;
     width: 100%;
     padding: 20px 0;
     background-color: #615d5d;
     text-align: center;
}
 .screens_wrap {
     display: inline-block;
     margin: 0 auto;
     height: 100%;
     position: relative;
}
 .screen_inner {
     position: relative;
     height: 100%;
     margin: 0 auto;
     width: 150px;
}
 .screen {
     position: absolute;
     width:100px;
     height: 58px;
     border: 3px solid #aeaeae;
}
/* transparent style -------------------------------------------------------------------*/
 .nav .screen.screen1 {
     bottom: 0;
     left: 0;
     z-index: 3;
     background-color: #00ad63;
}
 .nav a .screen.screen2 {
     bottom: 15px;
     left: 15px;
     z-index: 2;
     background-color: transparent;
}
 .nav a .screen.screen2:hover{
     background-color: #4f025a;
}
 .nav .screen.screen3 {
     bottom: 30px;
     left: 30px;
     z-index: 1;
     background-color: transparent;
}
 .nav .screen.screen3:hover{
     background-color: #ffec36;
}
 .nav .screen2:hover, .screen3:hover {
     -webkit-animation-name: hover;
     -webkit-animation-duration: 1s;
     animation-name: hover;
     animation-duration: 4s;
     -webkit-animation-fill-mode: forwards;
     opacity: 1;
     width: 100px;
}
.nav.nav6 {
     height: 200px;
}
 .screen_inner a.screenanchors:first-child img {
     position: absolute;
     left: 0;
     top: 0;
     z-index: 1;
}
 .screen_inner a.screenanchors:nth-child(2) img{
     position: absolute;
     left: 20px;
     top: 20px;
     z-index: 2;
}
 .screen_inner a.screenanchors:nth-child(3) img{
     position: absolute;
     left: 40px;
     top: 40px;
     z-index: 3;
}
 .screenanchors img {
     overflow: hidden;
}
 @keyframes spinning {
     from {
         transform: translateZ(-5em) rotateY(0deg);
    }
     to {
         transform: translateZ(-5em) rotateY(180deg);
    }
}
 @keyframes skewing {
     from {
         transform: translateZ(-5em) skew(-3deg, -25deg);
    }
     to {
         transform: translateZ(-5em) skew(-3deg, 0deg);
         width: 100%;
         height: 100px;
         z-index: 9999999;
         bottom: 0;
    }
}
/* Standard syntax */
 @keyframes hover {
     0% {
        margin-bottom:+10px;
         bottom: unset;
    }
     100% {
        margin-bottom:+10px;
         bottom: unset;
    }
}

<div class="nav nav6" style="margin-top: 25px;">
        <div class="screens_wrap">
            <div class="screen_inner">
                <a href="javascript:void(0)" class="screenanchors"><img id="imgName" src="https://imageshack.com/i/plylrZh4p" onclick="changeSrc()" width="100px"></a>
                <a href="javascript:void(0)" class="screenanchors"><img id="imgName1" src="https://imageshack.com/i/pljaZE0Gp" onclick="changeSrc1()" width="100px"></a>
                <a href="javascript:void(0)" class="screenanchors"><img id="imgName2" src="https://imageshack.com/i/plm9slyTp" onclick="changeSrc2()" width="100px"></a>
            </div>
        </div>
    </div>
    
    
      <script>
    function changeSrc(){
            document.getElementById("imgName").src="https://imageshack.com/i/plm9slyTp";
            document.getElementById("imgName1").src="https://imageshack.com/i/plylrZh4p";
            document.getElementById("imgName2").src="https://imageshack.com/i/pljaZE0Gp";
        }
        function changeSrc1(){
            document.getElementById("imgName").src="https://imageshack.com/i/pljaZE0Gp";
            document.getElementById("imgName1").src="https://imageshack.com/i/plm9slyTp";
            document.getElementById("imgName2").src="https://imageshack.com/i/plylrZh4p";
        }
        function changeSrc2(){
            document.getElementById("imgName").src="https://imageshack.com/i/plylrZh4p";
            document.getElementById("imgName1").src="https://imageshack.com/i/pljaZE0Gp";
            document.getElementById("imgName2").src="https://imageshack.com/i/plm9slyTp";
        }
        </script>

它应该通过单击单个图像上的每个位置来工作，没有覆盖层会影响可点击的空间...

Answer 1

为了帮助其他人，我使用区域映射解决了此问题...

锚点覆盖，并且颜色变化不正确，因为无法完全点击

1 个答案: