第N個孩子選擇器

我有困難使用第n個孩子選擇器。我有這樣的HTML代碼：第N個孩子選擇器

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來選擇每個圖像以將其向下移動：CSS屬性？

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

來源

2013-08-02 Bucthree

請準備小提琴 –

不太清楚你的意思......像只刪除了'頂：0像素;'？ –

在這裏測試你的代碼http://jsfiddle.net/併發布結果，以便我們可以更好地理解活工作代碼 –

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

從.mh-menu li img中刪除top: 0px，並且可能會加上margin-top負數，無論li項目的height是什麼。不是一個真正的nth selector問題

FIDDLE

來源

2013-08-02 16:02:54 feitla

太棒了！謝謝！！ – Bucthree

這是一個有點棘手，以確定大圖片或你想讓它看起來像什麼。但我敢打賭，這樣的事情可能讓你開始：

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

或者只刪除您對本規則中的「頂」的聲明（？）：

.mh-menu li img {...}

來源

2013-08-02 15:59:12 BjornJohnson

第N個孩子選擇器

回答

相關問題