부모 요소에 렌더링되지 않는 의사 요소 이미지 : 호버

Question

부모 목록 항목을 마우스로 가리키면 의사 요소를 사용하여 여러 이미지를 추가하려고합니다. Chrome에서 검사 할 때 의사 요소가 나타나지만 .png가 제대로 렌더링되지 않습니다. 선택기를 제대로 사용하고 있는지 또는 코드에 다른 문제가 있는지 궁금합니다. 이 here의 실제 예를 볼 수 있습니다.

이

<main> 
    <section id="results"> 
    <ul> 
     <li class="term-list"> 
     <dl> 
      <dt class="term">hello</dt> 
      <dd class="pronounce">[ <strong>he</strong>-lo ]</dd> 
     </dl> 
     </li> 
     <li class="term-list"> 
     <dl> 
      <dt class="term">word</dt> 
      <dd class="pronounce">[ <strong>wurd</strong> ]</dd> 
     </dl> 
     </li> 
     <li class="term-list"> 
     <dl> 
      <dt class="term">another</dt> 
      <dd class="pronounce">[ uh-<strong>nuth</strong>-er ]</dd> 
     </dl> 
     </li> 
     <li class="term-list"> 
     <dl> 
      <dt class="term">aviation</dt> 
      <dd class="pronounce">[ ay-vee-<strong>ay</strong>-shun ]</dd> 
     </dl> 
     </li> 
     <li class="term-list"> 
     <dl> 
      <dt class="term">hello</dt> 
      <dd class="pronounce">[ <strong>he</strong>-lo ]</dd> 
     </dl> 
     </li> 
    </ul> 
    </section> 
</main> 

CSS : 여기

는 HTML입니다

.term-list { 
    border-top: 1px solid gray; 
    color: gray; 
    padding: 15px 10px; 
} 

.term-list:last-child { 
    border-bottom: 1px solid gray; 
} 

.term-list:hover, 
.term-list:hover + .term-list { 
    border-top: 1px solid white; 
    -webkit-transition: border-top .2s ease-in-out; 
    -moz-transition: border-top .2s ease-in-out; 
    -ms-transition: border-top .2s ease-in-out; 
    -o-transition: border-top .2s ease-in-out; 
    transition: border-top .2s ease-in-out; 
} 

.term-list:hover { 
    color: white; 
    -webkit-transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -ms-transition: color .2s ease-in-out; 
    -o-transition: color .2s ease-in-out; 
    transition: color .2s ease-in-out; 
    cursor: pointer; 
} 

.term-list:hover::last-child { 
    border-bottom: 1px solid white; 
    -webkit-transition: border-bottom .2s ease-in-out; 
    -moz-transition: border-bottom .2s ease-in-out; 
    -ms-transition: border-bottom .2s ease-in-out; 
    -o-transition: border-bottom .2s ease-in-out; 
    transition: border-bottom .2s ease-in-out; 
} 

.term-list:hover dl::after { 
    content: ""; 
    display: inline-block; 
    position: absolute; 
    right: 5px; 
    top: 50%; 
    margin-top: -20px; 
    width: 40px; 
    height: 40px; 
    background-size: 40px 40px; 
    background: url("https://preview.c9users.io/patbrennan/demo-project/launchschool/249/dictionary/images/arrow-right.png") 0 0 no-repeat; 
} 

Answer 1

이 변경

당신의

background: url("https://preview.c9users.io/patbrennan/demo-project/launchschool/249/dictionary/images/arrow-right.png") 0 0 no-repeat;

로

Answer 2

편집

아래의 답변은 반만 맞습니다. 40px 40px이 유효합니다. 문제는 background의 속기 속성이 초기에 background-size으로 설정 한 것을 덮어 쓰는 것입니다. 오버라이드는 속기 속성 뒤에 위치해야합니다. 그렇지 않으면 오버라이드됩니다.

원래 대답

이유는 이미지가 40px로 40px되지 않는 것입니다.

는 이미지가 올바르게 설정되고,하지만 당신은 단지 투명 그것의 왼쪽 상단 모서리를보고있다. .term-list:hover dl::after에 background-size: contain;을 사용하여 의사 요소의 너비와 높이로 강제 바인딩하십시오.