[css] 질문있습니다!


  • Level 4

    1. hover 했을 때 선택자의 하위 요소까지 같이 크기를 키우고 싶은 데 어떻게 하나요?
      제가 인스타박스에 올렸을때 나머지 모두가 선택 되게요..?

                   <div class="instabox">
                           <div class="instatop">
                               <img src="./img/jog.jpg" alt="" class="instaprofile">
                               <h3 class="instaid">hyotaek__</h3>
                               <span class="dotdot">···</span>
                           </div>
      
                           <div class="instaimg">
                               <img src="http://placehold.it/315x315" alt="" class="insta">
                           </div>
      
                           <div class="instatapbar">
                               <img src="./img/insta_heart.png" alt="" class="heart">
                               <img src="./img/insta_chat.png" alt="" class="char">
                               <img src="./img/insta_share.png" alt="" class="share">
                               <img src="./img/insta_navdot.png" alt="" class="navdot">
                               <img src="./img/insta_save.png" alt="" class="save">
                           </div>
      
                           <div class="instacontent">
                               <div class="views">13,523 views</div>
                               <div class="realcontent">
                                   <span class="secprofile">hyotaek__</span>
                                   <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo illo excepturi error, velit repellendus omnis voluptate possimus dicta unde quos exercitationem corporis, dolorem, quo ea consequuntur! Et assumenda minima earum.</p>
                               </div>
                           </div>
                       </div>
      
    2. hover 시 선택한 것과 선택한 하위 요소를 제외한 나머지의 opacity를 낮출 땐 어떻게 선택자를 만져야 하나요?

    • 만약 위 코드에서 제가 인스타 박스를 골랐다면 그것을 제외한 모든 것의 오파시티를 낮추려고요!
  • Level 9

    히히 도움되었다니 다행입니다 ㅎㅎ

  • Level 1

    @김철민 허어너아아아아아어터커컁ㅇㅇ 이런 친절한 답변과 예시ㅠㅜㅜㅜㅜ 감사합니다!!!

  • Level 9

    2번 문제에 대해선 CSS을 활용했는데 2개의 예시를 선보이겠습니다 😄
    두 예시의 차이점에 대해선 <style> 태그 내 코드를 참고해주세요.

    1. 처음엔 모든 이미지들이 반투명(opacity: 0.2)이었다가 하나의 이미지에 hover 시, 해당 hover 이미지만 opacity:1 로 변경
    <body>
        <!-- 예제 참고 : http://jsfiddle.net/ELA8b/1/ -->
        <style>
            .cat:not(:hover) { opacity: 0.2; }
        </style>
        
        <div class="menuCat">
            <div>- 나는 집사님, 고양이는 주인님 -</div>
            <div style="color: #ff8383; font-weight: bold;">이미지에 마우스 오버 시 해당 이미지만 opacity : 1 수치로 됩니다.</div>
            <div style="margin-top: 20px; display: flex">
                <div><img class="cat" src="https://jngnposwzs-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/Adopt-Fees-nobkgrd1-768x524.png" style="max-width: 250px"></div>
                <div><img class="cat" src="https://images.theconversation.com/files/280024/original/file-20190618-118505-aag3r7.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip" style="max-width: 250px"></div>
                <div><img class="cat" src="https://4r9jw3yzttn13be1ir5eoyqv-wpengine.netdna-ssl.com/wp-content/uploads/2016/04/kitty-1.png" style="max-width: 250px"></div>
            </div>
        </div>
    </body>
    
    1. hover 전에는 모든 이미지의 opacity: 1, 이미지 hover 시 해당 이미지를 제외한 모든 이미지가 opacity: 0.2로 변경
    <body>
        <!-- 예제 참고 : https://stackoverflow.com/a/26527499 -->
        <style>
            .menuCat:hover .cat { opacity:0.5; }
            .menuCat .cat:hover { opacity:1; }
        </style>
        
        <div class="menuCat">
            <div>- 나는 집사님, 고양이는 주인님 -</div>
            <div style="color: #ff8383; font-weight: bold;">이미지에 마우스 오버 시 해당 이미지만 opacity : 1 수치로 됩니다.</div>
            <div style="margin-top: 20px; display: flex">
                <div><img class="cat" src="https://jngnposwzs-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/Adopt-Fees-nobkgrd1-768x524.png" style="max-width: 250px"></div>
                <div><img class="cat" src="https://images.theconversation.com/files/280024/original/file-20190618-118505-aag3r7.jpg?ixlib=rb-1.1.0&q=45&auto=format&w=496&fit=clip" style="max-width: 250px"></div>
                <div><img class="cat" src="https://4r9jw3yzttn13be1ir5eoyqv-wpengine.netdna-ssl.com/wp-content/uploads/2016/04/kitty-1.png" style="max-width: 250px"></div>
            </div>
        </div>
    </body>
    
  • Level 9

    1번 질문 같은 경우 저는 jquery 및 javascript를 활용해서 했습니다.
    아래 예제는 하나의 이미지를 마우스 오버 시, 마우스 오버한 이미지가 가진 class 선택자에 해당하는 다른 이미지가 전부 css 영향을 끼칩니다.

    ... (코드 생략) ...
    <body>
    <style>
            .menuDog { margin-top: 250px; }
    </style>
        
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".menuCat").hover(
            function() {
                $('div > .cat').css('max-width', '250px');
            }, function() {
                setTimeout(function() {
                    $('div > .cat').css('max-width', '150px');
                });
            });
            
            $(".menuDog").hover(
            function() {
                $('div > .dog').css('max-width', '100px');
            }, function() {
                setTimeout(function() {
                    $('div > .dog').css('max-width', '150px');
                });
            });
        });
    </script>
    
    <div class="menuCat">
            <div>- 나는 집사님, 고양이는 주인님 -</div>
            <div style="color: #ff8383; font-weight: bold;">고양이 이미지 하나에 마우스 오버 시 전체 이미지가 150px → 250px로 줄어듭니다.</div>
            <div><img class="cat" src="https://jngnposwzs-flywheel.netdna-ssl.com/wp-content/uploads/2019/05/Adopt-Fees-nobkgrd1-768x524.png" style="max-width: 150px"></div>
            <div><img class="cat" src="https://4r9jw3yzttn13be1ir5eoyqv-wpengine.netdna-ssl.com/wp-content/uploads/2016/04/kitty-1.png" style="max-width: 150px"></div>
        </div>
        
        <div class="menuDog">
            <div>- 댕청이 -</div>
            <div style="color: #ff8383; font-weight: bold;">강아지 이미지 하나에 마우스 오버 시 전체 이미지가 150px → 100px로 줄어듭니다.</div>
            <div><img class="dog" src="https://cdn.univ20.com/wp-content/uploads/2015/08/2a1670abee621dd8e9c1b8fa9c1b6dae.gif" style="max-width: 150px"></div>
            <div><img class="dog" src="https://images.mypetlife.co.kr/wp-content/uploads/2018/07/13201102/puppy-1189067_1280.jpg" style="max-width: 150px"></div>
    </div>
    </body>
    

ONLINE USERS

POPULAR TOPICS

SUGGESTED TOPICS