html - css 使悬停在 li 时显示图像

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; }