Question

我正在使用图像作为我的单选按钮。我知道CSS过滤器效果会影响z-index属性。

我创建了一个样本小提琴：

https://jsfiddle.net/iambong/2kcvv3bL/1/

CSS：

.colour-black{background-image:url(https://s28.postimg.org/p585381cd/Colour_Black.png);}
.colour-blue{background-image:url(https://s24.postimg.org/clxbf89g5/Colour_Blue_suede.png);}
.colour-chestnut-brown{background-image:url(https://s23.postimg.org/swdj7nh6z/Colour_Chestnut_Brown.png);}

.colour-selector input{
position:relative;
z-index:2 !important;
overflow: hidden;
background-repeat:no-repeat;
border: none;
margin:0;padding:0;
-webkit-appearance:none;
   -moz-appearance:none;
        appearance:none;
 }

.colour-selector input:active +.colour-cc{opacity: 0.9; position:relative;    z-index:2;}
.colour-selector input:checked +.colour-cc{
position:relative; 
z-index:2;
-webkit-filter: none;
   -moz-filter: none;
        filter: none;
}

.colour-cc{
positon:relative;
  z-index:3 !important;
background-size:contain;
background-repeat:no-repeat;
display:inline-block;
overflow: hidden;
padding: 8px;
margin-bottom: 8px;
align: left;
width:100px;height:70px;
-webkit-transition: all 100ms ease-in;
   -moz-transition: all 100ms ease-in;
        transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
   -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
        filter: brightness(1.8) grayscale(1) opacity(.7);
}

.colour-cc:hover{
 positon:relative;
 z-index:10 !important;
 overflow: hidden;
 display:inline-block;
-webkit-filter: brightness(1.2) grayscale(.5) opacity(0.9);
   -moz-filter: brightness(1.2) grayscale(.5) opacity(0.9);
        filter: brightness(1.2) grayscale(.5) opacity(0.9);
-webkit-transform:scale(2.5); /* Safari and Chrome */
-moz-transform:scale(2.5); /* Firefox */
-ms-transform:scale(2.5); /* IE 9 */
-o-transform:scale(2.5); /* Opera */
 transform:scale(2.5);


}

HTML：

<p>Colour Selection</p>                  

 <div class="colour-selector"; style="position:relative; left:100px; top:50px; z-index:1;">

     <input id="colour-black" type="radio" name="properties[colour]" value="colour-black" style="position:relative; z-index:3;"/>
     <label class="colour-cc colour-black" for="colour-black"></label>
       <input id="colour-blue" type="radio" name="properties[colour]" value="colour-blue" style="position:relative; z-index:3;"/>
     <label class="colour-cc colour-blue" for="colour-blue"></label>
     <input id="colour-chestnut-brown" type="radio" name="properties[colour]" value="colour-chestnut-brown" style="position:relative; z-index:3;"/>
     <label class="colour-cc colour-chestnut-brown" for="colour-chestnut-brown"></label>

</div>

我想要的：我希望实现的是鼠标悬停（悬停），放大的图像将是完整的，不显示相邻图像的部分

现在出了什么问题：如果将鼠标悬停在中间图片上，则放大的图像（使用CSS中的变换比例）会显示部分相邻图像

感谢您的帮助！

Answer 1

使用类似的东西：

#nav{z-index:2}
#nav li{display:inline-block;
    text-align:center;
    padding:10px;
    color:#fff;
   
    cursor:pointer;
height:50px;
  width:100px;
list-style-type:none;}

#nav ul li:nth-child(1){background:#b4b4b4;}
#nav ul li:nth-child(2){background:#cecece;}
#nav ul li:nth-child(3){background:#b4b4b4;}


#nav ul:hover li {
          transform: translateX(-24%);
    z-index:4;
}
#nav ul:hover li:hover {
 
          transform: scale(1.5);
          transition-duration: 0.18182s;
}
#nav li:hover ~ li {
          transform: translateX(24%);
    
}

<div id="nav">
    <ul>
    <li><p></p></li>
    <li><p></p></li>
    
    
    <li><p></p></li></ul>
    
    
          
        
    </div>

过滤效果的HTML z-index

1 个答案: