• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

hover last-child() 인식이 되지 않습니다.

21.04.01 18:34 작성 조회수 328

1

<style>
.contents{
  positionrelative;
  padding-bottom50px;
  z-index:9;
}

.sb_menu{
  positionabsolute;
  margin-top:-25px;
  displaytable;
  border-collapsecollapse;
  table-layout : fixed;
  width:100%;
  font-size1.1em;
  /* background-color: aqua;   */
}
.sb_menu li{
  displaytable-cell;
  border:1px solid #dcdcdc
  background-color#fff;
  border-top:none
  text-aligncenter;
}
.sb_menu li.on{
  background-color#2d3c47;
  border-left:none;
}  
.sb_menu li a{
  displayblock;
  width:100%;
  padding:17px 0;
  /* border:1px solid red; */
}
.sb_menu li.on a{
  color#fff;;
}
.sb_menu li a:hover{
  background-color#2d3c47;
  color#fff;;
}
.sb_menu li a:hover:last-child(){
  border-right:none;
}
</style>
<section class="contents inner">

  <div class="sb_menu">
    <li class="on"><a href="#" >사업개요</a></li>
    <li><a href="#">브랜드소개</a></li>
    <li><a href="#">오시는길</a></li>
  </div>

</section>
/*****************************************/
아래 부분이 인식이 되지 않습니다.
.sb_menu li a:hover:last-child(){
  border-right:none;
}
마지막 박스 에 마우스 올리면 오른쪽 줄이 나오지 않게 하려고요..
a:hover:last-child() 이렇게 사용하면 안되는건가요?

 

답변 2

·

답변을 작성해보세요.

0

jylee1715님의 프로필

jylee1715

질문자

2021.04.04

a의 border를 찍어보니 위와 같은 소스로 적용시 a의 border 오른쪽이 없어지네요..
hover는 a의 속성으로 li의 border를 제어 하지 못하는것 같습니다.

a의 border 값으로 제어하니 잘 되네요.. 감사합니다.

0

선택자가 잘못되었어요.

a:hover:last-child() 이렇게 하시면 안되구요.

a:last-child:hover 이렇게 하셔야 해요.

그리고 first-child와 last-child는 ()가 없습니다.

만약 last-child(1)이라고 하면 마지막에 있는거 중에서 1번째...라는 뜻인데 이상하잖아요. 

jylee1715님의 프로필

jylee1715

질문자

2021.04.02

답변 너무 감사드려요.^^

알려주신데로 했는데도  "오시는길" 오른쪽 border가 없어지지 않습니다.

이런경우 다른 방법을 사용해야 할까요?

 

소스코드를 다 봐야하지만 일단 급한데로 !important 사용하세요~