修改

Question

我正在尝试使用伪元素添加多个图像，当父列表项悬停在上面时。在Chrome中检查时，会出现伪元素，但.png无法正常呈现。我想知道我是否正确使用选择器或者代码是否存在其他问题。您可以看到此here的实时示例。

这是html：

<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：

.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;

进入

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

Answer 2

修改

以下答案只有一半是正确的。 40px 40px有效。问题是background的速记属性会覆盖最初设置的background-size。需要在速记属性之后放置覆盖;否则，他们会被覆盖。

原始答案

原因是你的图像不是40像素×40像素。

图像正确设置，但您只能看到它的左上角，这是透明的。在.term-list:hover dl::after上使用background-size: contain;强制它被伪元素的宽度和高度限制。

父元素上不呈现伪元素图像：悬停

2 个答案:

修改

原始答案