css div hover以不同的方式影響子元素

Question

我有一個縮略圖列表。圖像浮動到左側。當文本區域被徘徊時，我希望文本在半途移動並重疊圖像。我試過使用位置和最近的翻譯，但只是當我懸停在他們身上時，它不同地移動我的文本標題和內容。我想移動整個div。我怎麼做？

#gallery{ 
 
    margin-left:370px; 
 
    width: auto; 
 
    height:385px; 
 
    position: relative; 
 

 
} 
 

 
#content{ 
 
    padding:20px 10px 0; 
 
    margin:0px 20px 20px 0; 
 
    color:#888888; 
 
    float: left; 
 

 
} 
 
#content a,p, ul, li, h3{ 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 

 
#content>ul{ 
 
    list-style-type: none; 
 
    width:700px; 
 
    padding:0px; 
 
    clear:left; 
 
} 
 

 
#content>ul>li h3,h6 { 
 
    font: bold 20px/1.5 Helvetica, Verdana, sans-serif; 
 
    color:white; 
 

 
} 
 
#content>ul>li h3:hover { 
 
    color:#66cc33; 
 
} 
 
#content ul> li{ 
 
    position: relative; 
 
    background-color: #141414; 
 
    padding:0 0 0 0; 
 
} 
 
#content li:nth-child(even){ 
 
    background-color:#333333; 
 
} 
 

 
#content li:first-child{ 
 
    padding-top: 0 !important; 
 
} 
 

 
#content > ul> li p{ 
 
    font: 200 12px/1.5 Georgia, Times New Roman, serif; 
 
    text-align: justify; 
 
} 
 
#content li { 
 
    padding: 10px; 
 
    overflow: auto; 
 
} 
 

 
#content li:hover { 
 
    cursor: pointer; 
 
    border-radius: 3px; 
 
} 
 
.thumbContainer{ 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.thumbContainer img { 
 
    float: left; 
 
    margin: 0 15px 0 0; 
 
    height:93px; 
 
    width:144px; 
 
} 
 
.latest-news-container{ 
 
    -webkit-transition: translate 2s ease-in-out; 
 
    -moz-transition: translate 2s ease-in-out; 
 
    transition: translate 2s ease-in-out; 
 
} 
 
div.latest-news-container :hover{ 
 
    -webkit-transform: translate(-50px); 
 
    transform: translate(-50px); 
 
    -moz-transform: translate(-50px); 
 
    background-color: inherit; 
 
}

<ul> 
 
        <li> 
 
         <div class="thumbContainer"> 
 
         <img src="Images/7.jpg" alt="Willian Borges" > 
 
         </div> 
 
         <div class="latest-news-container"> 
 
         <h3>Willian Aiming for the Top</h3> 
 
         <p> 
 
          The former Liverpool midfielder will have brought back painful memories for Jose Mourinho and Chelsea fans after he posted a hilarious nod to the 
 
          infamous "ghost goal" incident from the 2004-05 season.... <a class="btn" href="#">Read more</a> 
 
         </p> 
 
         </div> 
 

 
        </li> 
 

 
        <li> 
 
         <div class="thumbContainer"> 
 
         <img src="images/8.jpg" alt="Lukaku" > 
 
         </div> 
 
         <div class="latest-news-container"> 
 
         <h3>Lukaku Goal Drought Continues</h3> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet.</p> 
 
         </div> 
 
        </li> 
 

 
        <li> 
 
         <div class="thumbContainer"> 
 
         <img src="images/9.jpg" alt="Hart"> 
 
         </div> 
 
         <div class="latest-news-container"> 
 
         <h3>Bad Treatment at the City</h3> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet.</p> 
 
         </div> 
 
        </li> 
 

 
        <li> 
 
         <div class="thumbContainer"> 
 
         <img src="images/10.jpg" alt="Ronaldo"> 
 
         </div> 
 
         <div class="latest-news-container"> 
 
         <p> 
 
         <h3>CR7 Smiling to the Bank</h3> 
 
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
          Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet.</p> 
 
         </p> 
 
         </div> 
 
        </li> 
 
       </ul>

Answer 1

container和:hover

div.latest-news-container :hover{ 

更改它之間移除空間：

div.latest-news-container:hover{