CSS淡出其他

您好，我正在尝试创建悬停效果，因此当某人悬停在带有LI元素的图片上时，此图片保持全透明状态，但oitehr LI元素略有淡化。我知道这可以做到，但目前我的代码正在使一切淡出。CSS淡出其他

请在我的代码下找到一个小提琴。

任何帮助都很赞赏。

.imageWrapper { 
    position: relative; 
    z-index: 5; 
} 

.imageWrapper:after { 
    content: " "; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    display: block; 
    z-index: 10; 
    transition: background 0.3s linear; 
} 

.cpClientIcon { 
    /* 
    .cpImageWithTitle { 
    .title { 
     @include opacity(0); 
     transition:opacity 0.3s linear; 
    } 
    } 
*/ 
} 

.cpClientIcon:hover .imageWrapper:after, .cpClientIcon:focus .imageWrapper:after, .cpClientIcon:active .imageWrapper:after { 
    background: red; 
} 

.cpClientIcon:hover .imageWrapper:hover, .cpClientIcon:hover .imageWrapper:focus, .cpClientIcon:hover .imageWrapper:active, .cpClientIcon:focus .imageWrapper:hover, .cpClientIcon:focus .imageWrapper:focus, .cpClientIcon:focus .imageWrapper:active, .cpClientIcon:active .imageWrapper:hover, .cpClientIcon:active .imageWrapper:focus, .cpClientIcon:active .imageWrapper:active { 
    /* 
     .title { 
      @include opacity(1); 
     } 
*/ 
} 

.cpClientIcon:hover .imageWrapper:hover .imageWrapper:after, .cpClientIcon:hover .imageWrapper:focus .imageWrapper:after, .cpClientIcon:hover .imageWrapper:active .imageWrapper:after, .cpClientIcon:focus .imageWrapper:hover .imageWrapper:after, .cpClientIcon:focus .imageWrapper:focus .imageWrapper:after, .cpClientIcon:focus .imageWrapper:active .imageWrapper:after, .cpClientIcon:active .imageWrapper:hover .imageWrapper:after, .cpClientIcon:active .imageWrapper:focus .imageWrapper:after, .cpClientIcon:active .imageWrapper:active .imageWrapper:after { 
    background: transparent; 
} 

/* Clients Page */ 
.cpClientIcon { 
    background: #fff; 
} 

.cpClientIcon.ClientIcon { 
    width: 100%; 
} 

.cpClientIcon.ClientIcon ul li { 
    width: 25%; 
    display: inline-block; 
    padding: 0; 
    margin: 0; 
    float: left; 
} 

.cpClientIcon.ClientIcon ul li.imageWrapper { 
    position: relative; 
} 

.cpClientIcon.ClientIcon ul li.imageWrapper span { 
    position: absolute; 
    bottom: 0; 
    opacity: 0; 
    transform: translate(-50%, 0); 
    left: 50%; 
    background: rgba(0, 0, 0, 0.8); 
    color: #fff; 
    width: 100%; 
    text-align: center; 
    padding: 1em 0; 
    transition: all 0.5s ease; 
} 

.cpClientIcon.ClientIcon ul li.imageWrapper:hover span { 
    opacity: 1; 
} 

.cpClientIcon.ClientIcon ul li img { 
    width: 100%; 
    height: auto; 
}

https://jsfiddle.net/dfLk3gy5/

来源

2015-05-13 Harry Berry

你可以设置一个悬停父元素和使用它对于看起来像这样的孩子.parent：hover .child {styles;} ...你不能通过悬停儿童元素来影响兄弟姐妹或父母 –

设置你的悬停规则来进行UL设置所有子LI元素所需淡出的不透明度，然后设置一个悬停规则来进行LI设置不透明度回到完全不透明：

ul:hover li { 
    opacity: 0.5; 
} 

ul:hover li:hover { 
    opacity: 1; 
}

实施例： https://jsfiddle.net/kgow697h/

来源

2015-05-13 15:32:37

你的男人。谢谢你这么简单的事情，事实证明它很棘手;） –

您可以使用mix-blend-mode太：

li a { 
 
    background: rgba(255, 255, 255, 0.5); 
 
    display: inline-block; 
 
    width:100%; 
 
} 
 
    
 
li * { 
 
    mix-blend-mode: soft-light; 
 
} 
 
    
 
li:hover * { 
 
    mix-blend-mode: unset; 
 
} 
 
li {display:inline-block;width:20%;} 
 
img {max-width:100%;}

<div class="stPage st"> 
 
    <div class="gpClientIcons"> 
 
     <div class="cpClientIcon ClientIcon"> 
 
      <ul> 
 
       <li class="imageWrapper"> <a href="/work/angostura-1919"> 
 
        <img src="http://good.dev.good-creative.com/sites/default/files/styles/client_logo/public/CLIENT_LOGOS_WHITE_BG_24_ANGOSTURA.png?itok=TxAkk1y-"/> 
 
           </a> 
 
<a href="/work/angostura-1919"><span>View Case Study</span></a> 
 

 
       </li> 
 
       <li class="imageWrapper"> <a href="/work/fyne-ales"> 
 
        <img src="http://good.dev.good-creative.com/sites/default/files/styles/client_logo/public/03_1.png?itok=NRCjw1SJ"/> 
 
           </a> 
 
<a href="/work/fyne-ales"><span>View Case Study</span></a> 
 

 
       </li> 
 
       <li class="imageWrapper"> <a href="/work/glengoyne"> 
 
        <img src="http://good.dev.good-creative.com/sites/default/files/styles/client_logo/public/01_.png?itok=ib3J3BkM"/> 
 
           </a> 
 
<a href="/work/glengoyne"><span>View Case Study</span></a> 
 

 
       </li> 
 
       <li class="imageWrapper"> <a href="/work/okells"> 
 
        <img src="http://good.dev.good-creative.com/sites/default/files/styles/client_logo/public/01_.png?itok=ib3J3BkM"/> 
 
           </a> 
 
<a href="/work/okells"><span>View Case Study</span></a> 
 

 
       </li> 
 
       <li class="imageWrapper"> <a href="/work/rrspink-sons"> 
 
           <img src="http://good.dev.good-creative.com/sites/default/files/styles/client_logo/public/03_1.png?itok=NRCjw1SJ"> 
 
           </a> 
 
<a href="/work/rrspink-sons"><span>View Case Study</span></a> 
 

 
       </li> 
 
       <li class="imageWrapper"> <a href="/work/tamdhu"> 
 
           <img src="http://good.dev.good-creative.com/sites/default/files/styles/client_logo/public/01_.png?itok=ib3J3BkM"> 
 
           </a> 
 
<a href="/work/tamdhu"><span>View Case Study</span></a> 
 

 
       </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

它可以为内里还是只IMG任何元素来完成：https://jsfiddle.net/dfLk3gy5/1/

来源

2015-05-13 15:41:40

回答

相关问题