0

我在使用第 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/

4

2 回答 2

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

删除top: 0pxfrom.mh-menu li img并可能添加margin-top负数，无论项目height是什么li。不是真正的nth selector问题

小提琴

于 2013-08-02T16:02:54.837 回答
0

确定大局或您想要的样子有点棘手。但我敢打赌，这样的事情可能会让你开始：

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

或者......只需从您拥有的规则中删除“顶部”声明（？）：

.mh-menu li img {...}
于 2013-08-02T15:59:12.240 回答