Question

我很难使用第n个子选择器。我有这个HTML代码：

HTML

<div class="container">
   <ul class="mh-menu">
      <li>
         <a href="#">
            <span>Chairman of the Board</span>
            <span>Name</span>
         </a>
         <img src="images/richard.jpg" alt="richard"/>
         <p>Some Text</p>
      </li>
      <li>
         <a href="#">
            <span>Chief Executive Officer</span>
            <span>Name</span>
         </a>
         <img src="images/scott.jpg" alt="scott"/>
         <p>Some text</p>
      </li>
      <li>
         <a href="#">
            <span>Executive Vice President</span>
            <span>Name</span>
         </a>
         <img src="images/dana.png" alt="dana"/>
         <p>Some Text</p>
      </li>
      <li>
          <a href="#">
             <span>Executive Vice President</span>
             <span>Name</span>
          </a>
          <img src="images/jay.jpg" alt="jay"/>
          <p>Some text</p>
      </li>
   </ul>
</div>

与此CSS一起：

CSS

.mh-menu li img {
   position: absolute;
   z-index: 1;
   left: 0px;
   top: 0px;
   opacity: 0;
   -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
   -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;    
    }

.mh-menu li p {
  text-align: left;
  position: absolute;
  z-index: 1;
  left: 540px;
  top: 0px;
  opacity: 0;
  -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
  }

 .mh-menu li:hover img {
 left: 300px;
  opacity: 1;
  }

   .mh-menu li:hover p {
  left: 540px;
  opacity: 1;
 text-align: left;
 }

基本上它是一个菜单，当您将鼠标悬停在名称上时，图像以及一些文本会从右侧弹出。现在，图像和文本都在顶部弹出，但我想将图像向下移动，这样当您将鼠标悬停在名称上时，图像会从名称范围的顶部弹出。如何使用nth-child选择每个图像以使用top：CSS属性将其向下移动？

的jsfiddle http://jsfiddle.net/FGGpY/5/

Answer 1

.mh-menu li img {
    /* top: 0px; */
    margin-top:-90px;
}

从top: 0px移除.mh-menu li img，并在margin-top项height的任何内容中添加li。不是nth selector问题

FIDDLE

Answer 2

确定整体情况或者您希望它看起来如何，这有点棘手。但我敢打赌，这样的事情可能会让你开始：

.mh-menu li:hover:nth-child(2) img {
    top: 70px;
}

或者......只需从你对此规则中删除“top”声明（？）：

.mh-menu li img {...}

第N个孩子选择器

2 个答案: