html - 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

您必须将: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