css讓IMG顯示當懸停鋰

Question

我有一個頁面有很多LI標籤，並且對於任何LI有一個圖像，此圖像始終隱藏，除非當懸停的LI圖像必須顯示，我知道我有使用 display:none，但我不知道我可以用它在CSS上徘徊LI，而不是徘徊在IMG

HTML

<?php 
$pageNumber = $this->allQuestionsPageNumber; 
$numberOfPages = $this->allQuestionsNumberOfPages; 
$questions = $this->allQuestionsQuestionsForPage; 
?> 
<div id="allQuestions" class="container"> 
    <ul> 
     <?php while ($row = $questions->fetch()) { ?> 
      <li> 
       <p> 
        <label>Question</label> 
        <?php echo $row['text']; ?> 
       </p> 
       <p> 
        <label>Answer</label> 
        <?php echo $row['answer']; ?> 
       </p> 
       <p> 
        <img class="allqEdit"src="<?php echo URL; ?>public/images/Edit.png"/> 
       </p> 
      </li> 
     <?php } ?> 
     <li id="allQuestionsPages"> 
      <label>Page</label> 
      <?php for ($i = 1; $i <= $numberOfPages; $i++) { ?> 
       <a href="<?php echo URL; ?>Question/all/<?php echo $i; ?>"><?php echo $i; ?></a> 
      <?php } ?> 
     </li> 
    </ul> 
</div> 

CSS

.container ul li:hover{ 
    background-color: khaki; 
} 

Answer 1

這可以使用下面的CSS

li { 
    width: 50px; 
    height: 100px; 
    background-color: red; 
} 
li img { 
    display: none; 
} 
li:hover img { 
    display: block; 
} 

你可以看到現場的jsfiddle here

Answer 2

你必須把:hover僞類的li選擇：

li img { display: none; } 
li:hover img { display: inline; }