html - cssは、liをホバーしたときに表示されるimgを作成します

Question

LI多くのタグを持つページLIがあり、画像がある場合、この画像は常に非表示になっています。ただし、画像を表示する必要がある場合を除きますLI 。 ホバリング時のdisplay:nonecss 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 を見ることができます