Question

我尝试制作一些基于图像的链接只有在我仅使用CSS将鼠标悬停在标题中的链接上时才会显示。我似乎只能将它与图像一起使用，但只要在图像周围添加<a href="#"></a>，代码就会停止工作。

以下是我所拥有的基础......

HTML：

<ul id="Menu">
    <li>
        <a href="#">Link1
            <div class="hoverLinks">
                <a href="#"><img src="/img/pic1.jpg"></a>
                <a href="#"><img src="/img/pic2.jpg"></a>
            </div>
        </a>
    </li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
</ul>

CSS：

#Menu a div.hoverLinks {
    display: none; }
#Menu a:hover div.hoverLinks {
    display: block; }

正如我所提到的，如果我从图片pic1和pic2中删除<a href="#"></a>，这将完美无缺。 Working with non-linked images-jsfiddle。但是一旦我尝试制作图像链接，显示：none就会停止工作。这是选择器问题吗？我已尝试#Menu a div.hoverLinks * {及其变体来实现这一目标，但没有骰子。有没有办法使这个工作在div内的一切？ non-working code-jsfiddle

Answer 1

这将在链接悬停

上隐藏显示图像

http://jsfiddle.net/LE6gf/2/

#Menu  .hoverLinks {
    display: none; }
#Menu li:hover .hoverLinks {
    display: block; }

Answer 2

请检查CSS中的以下修改

#Menu a ~ div.hoverLinks {
    display: none; 
}
#Menu a:hover ~ div.hoverLinks {
    display: block;
}

这允许我在悬停时使用~兄弟选择器。

Answer 3

试试这个：

#Menu .hoverLinks {
    display: none; }

http://jsfiddle.net/maysamsh/LE6gf/1/

css显示：在div内的所有内容都没有工作

3 个答案: