-
a : hover : not () 실행은 .active class에만 응답합니까?카테고리 없음 2020. 8. 5. 03:38
질문
탐색 표시 줄을 만들고 3 섹션으로 나누었습니다.1. id = "메뉴"2. id = "fake"(공간을 채우는 버튼)3. id = "social"
기본적으로 .active 페이지와 가짜 버튼이 호버 효과에 포함되지 않기를 원하지만 .fake class를 만들고 a : hover : not (.fake) 시도하면 작동하지 않습니다.그리고 둘 이상의 예외를 만들 수 있는지 궁금해했습니다.
전체 코드는 다음과 같습니다
body{ font-family:'Skranji',sans-serif; font-size:100%; margin:0; } #nav{ margin:0; padding:0; width:100%; height:35px; position:fixed; overflow-y:hidden; font-size:16px; letter-spacing:3px; border-bottom-style:solid; border-bottom-width:1px; border-color:black; } #nav a:not(.active){ background-color:rgba(0, 0, 0, 0.72); } #nav a.active{ background-color:black; color:white; } #nav a:hover:not(.active){ background-color:rgba(128, 127, 127, 0.25); color:black; } /*#nav a.fake{ background-color:rgba(0, 0, 0, 0.72); } nav a:hover:not(.fake){ background-color:rgba(128, 127, 127, 0.25); color:black; }*/ #menu{ width:70%; } #fake{ width:15%; display:block; float:left; } #social{ width:15%; float:left; } #menu a{ display:table; width:25%; float:left; } #fake a{ width:100%; display:table; } #social a{ float:right; width:33.33%; } #menu a,#social a,#fake a{ text-decoration:none; margin:0; padding:5px; color:white; text-align:center; } .rMargin{ margin-right:10px; }<!DOCTYPE html> <html lang="en-us"> <head> <title>Title</title> <!-- Required meta tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css.css"> <link href="https://fonts.googleapis.com/css?family=Skranji" rel="stylesheet"> </head> <body> <header> <div id="nav"> <div id="menu"> <a class="active" href="home.html"><i class="fas fa-home rMargin"></i>Home</a> <a href="blog.html"><i class="fas fa-globe rMargin"></i>Blog</a> <a href="learn.html"><i class="fas fa-code rMargin"></i>Learn</a> <a href="contactMe.html"><i class="fas fa-envelope rMargin"></i>Contact Me</a> </div> <div id="fake" > <a class="fake" href="#"><button style="visibility:hidden"></button></a> </div> <div id="social"> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-facebook-f"></i></a> </div> </div> </header> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>답변1
답을 찾았습니다! 어떤 이유로 a : hover : not ()은 생각하는 .active class 만 허용하므로 개인적인 경우에는 예외가 필요한 요소에 활성 class를 삽입 한 다음 다른 class를 추가하여 스타일을 다시 조정해야했습니다. 요소는 실제로 .active class처럼 보이지 않습니다.이해하려면 코드를 조금 살펴 봐야하지만 실제로 문제를 해결하는 좋은 방법입니다.
body{ font-family:'Skranji',sans-serif; font-size:100%; margin:0; } #nav{ margin:0; padding:0; width:100%; height:35px; position:fixed; overflow-y:hidden; font-size:16px; letter-spacing:3px; border-bottom-style:solid; border-bottom-width:1px; border-color:black; } #nav a:not(.active){ background-color:rgba(0, 0, 0, 0.72); } #nav a.active{ background-color:black; color:white; } #nav a:hover:not(.active){ background-color:rgba(128, 127, 127, 0.25); color:black; } #nav a.fake{ background-color:rgba(0, 0, 0, 0.72); } #menu{ width:70%; } #fake{ width:15%; display:block; float:left; } #social{ width:15%; float:left; } #menu a{ display:table; width:25%; float:left; } #fake a{ width:100%; display:table; } #social a{ float:right; width:33.33%; } #menu a,#social a,#fake a{ text-decoration:none; margin:0; padding:5px; color:white; text-align:center; } .rMargin{ margin-right:10px; }<!DOCTYPE html> <html lang="en-us"> <head> <title>Title</title> <!-- Required meta tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css.css"> <link href="https://fonts.googleapis.com/css?family=Skranji" rel="stylesheet"> </head> <body> <header> <div id="nav"> <div id="menu"> <a class="active" href="home.html"><i class="fas fa-home rMargin"></i>Home</a> <a href="blog.html"><i class="fas fa-globe rMargin"></i>Blog</a> <a href="learn.html"><i class="fas fa-code rMargin"></i>Learn</a> <a href="contactMe.html"><i class="fas fa-envelope rMargin"></i>Contact Me</a> </div> <div id="fake" > <a class="active fake" href="#"><button style="visibility:hidden"></button></a> </div> <div id="social"> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-facebook-f"></i></a> </div> </div> </header> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>