[css] 질문있습니다!
-
-
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> -
hover 시 선택한 것과 선택한 하위 요소를 제외한 나머지의 opacity를 낮출 땐 어떻게 선택자를 만져야 하나요?
- 만약 위 코드에서 제가 인스타 박스를 골랐다면 그것을 제외한 모든 것의 오파시티를 낮추려고요!
-
-
히히 도움되었다니 다행입니다 ㅎㅎ
-
@김철민 허어너아아아아아어터커컁ㅇㅇ 이런 친절한 답변과 예시ㅠㅜㅜㅜㅜ 감사합니다!!!
-
2번 문제에 대해선 CSS을 활용했는데 2개의 예시를 선보이겠습니다
두 예시의 차이점에 대해선<style>태그 내 코드를 참고해주세요.- 처음엔 모든 이미지들이 반투명(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>- 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> -
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
-
[CSS] 질문입니다~~
질문 게시판 • • 밤토깽이 -
CSS style 질문입니다.
질문 게시판 • • 정향 -
HTML, CSS 질문
질문 게시판 • • 솜브라