>

내 웹 사이트의 소셜 미디어에 영향을 미치려고합니다. 모든 소셜 아이콘이 안에 있고 div에 호버 효과가 있습니다. . 내가하고 싶은 일은 filter: grayscale(100%) 로 필터를 재설정하는 것입니다  소셜 아이콘 위에 마우스를 올려 놓았습니다 (색상을 다시 표시). 많은 일을 시도했지만 버그 나 웹킷에는 문제가있는 것 같습니다.

filter: grayscale(0%)

.social:hover :not(h3) {
  filter: grayscale(100%);
  opacity: 0.8;
  -webkit-transition: all 300ms linear;
}
.social img {
  width: 32px;
  height: 32px;
}
.facebook img:hover {
  filter: grayscale(%);
  opacity: 1;
}

<div class="social"> <h3>Stay connected!</h3> <a target="_blank" class="btn facebook" href="https://www.facebook.com/LaDulceriaCuracao/"><img src="../Media/SocialMedia/facebook.gif"></a> <a target="_blank" class="instagram" href="https://www.instagram.com/dulceriacuracao/"><img src="../Media/SocialMedia/instagram.gif" /></a> <a target="_blank" class="twitter" href="https://twitter.com/La_Dulceria1"><img src="../Media/SocialMedia/twitter.gif" /></a> </div>

  • 답변 # 1

    이것이 어떻습니까?

    바이올린

    https://jsfiddle.net/Hastig/omdq64n5/

    body {
      width: 100%;
      margin: 0;
    }
    .container {
      display: flex;
      justify-content: center;
      width: 100%;
      font-size: 100px;
    }
    .item {
      display: flex;
      justify-content: center; 
      flex: 1;
    }
    i {
      display: flex;
      justify-content: center;
      color: red;
    }
    .container:hover i {
      filter: grayscale(100%);
    }
    .item:hover i {
      filter: grayscale(0%);
    }
    
    
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <div class="container">
      <div class="item"><i class="fa fa-picture-o"></i></div>
      <div class="item"><i class="fa fa-picture-o"></i></div>
      <div class="item"><i class="fa fa-picture-o"></i></div>
    </div>
    
    

  • 답변 # 2

    전체 선언을 삭제하지 않는 이유는 무엇입니까?

    .social:hover :not(h3){ filter: grayscale(100%); opacity: 0.8; -webkit-transition : all 300ms linear; }

    도 주석을 달 수 있습니다 와이즈 비즈

  • 답변 # 3

    다음과 같이 소셜 호버 클래스에서 필터 라인 코드를 제거 할 수 있습니다.

    /* code to remove here */
    
    

  • 답변 # 4

    이 작업을 수행 할 수 있습니다 :

    .
    social:hover :not(h3){
    /*filter: grayscale(100%);*/
    opacity: 0.8;
    -webkit-transition : all 300ms linear;
    }
    
    
    .social:hover {
      -webkit-transition: all 300ms linear;
    }
    .social:hover > div {
      opacity: 0.5;
    }
    .social:hover > div:hover {
      opacity: 1.0;
    }
    
    

    <section class="social"> <h3>Stay connected!</h3> <div><a target="_blank" class="facebook" href="https://www.facebook.com/LaDulceriaCuracao/"><img src="../Media/SocialMedia/facebook.gif"></a></div> <div><a target="_blank" class="instagram" href="https://www.instagram.com/dulceriacuracao/"><img src="../Media/SocialMedia/instagram.gif" /></a></div> <div><a target="_blank" class="twitter" href="https://twitter.com/La_Dulceria1"><img src="../Media/SocialMedia/twitter.gif" /></a></div> </section>

  • 이전 typescript - angular 2 - 원형 피처 모듈 의존성
  • 다음 Angular 2 - 각도 2 - 이상한 출력 오류