css在悬停李时显示图像

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

您必须将:hover伪类放在li选择器上：

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

Answer 2

这可以使用以下CSS

来完成

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

您可以看到实时jsFiddle here