CSS：如何将鼠标悬停在一个元素上，并显示另一个元素？ [英] CSS: How do I hover over one element, and show another?

问题描述

我有一个导航面板，当您将鼠标悬停在灯具< div> 上时，会在面板中显示前5个左右的灯具，主导航面板。

I have a navigation panel, and when you hover over the fixtures <div>, it displays the first 5 or so fixtures in a panel that drops down from the main navigation panel.

我试图使用CSS与：hover 实现这一点。
这是一个：hover 的例子： http://jsfiddle.net/EajKf/189/

Im trying to achieve this using CSS with :hover. This is an example of the :hover im trying to get: http://jsfiddle.net/EajKf/189/

HTML：

<div id="nav">
    <ul id="menu">                
        <li><a class="home" href="#">Home</a></li>
        <li><a class="fixtures" href="#">Fixtures</a></li>
        <li><a class="hidden" href="#">Manchester City</a></li>             
    </ul>
</div>

CSS：

#nav li a.fixtures:hover{
        color: #000;
        margin-top:1px;
    -webkit-transition-duration: 0.4s;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
    -webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
    background: rgba(255,102,51,0.8);
    opacity: 50%;
}
#nav li a.hidden{
     margin-top: 50px;
     padding: 100px;
     background-color: #fff;
     display: none;
}
#nav li a.fixtures:hover #nav li a.hidden{
    display: block;
}

感谢任何答案！

推荐答案

这是您的意思吗？

http://jsfiddle.net/EajKf/190/

html：

<div id="nav">
    <ul id="menu">                
        <li class="home"><a href="#">Home</a></li>
        <li class="fixtures"><a href="#">Fixtures</a></li>
        <li class="hidden"><a href="#">Manchester City</a></li>             
    </ul>
</div>

css：

#nav li.fixtures:hover{
        color: #000;
        margin-top:1px;
    -webkit-transition-duration: 0.4s;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0px 0px 20px rgba(0,235,255,0.8);
    -webkit-box-shadow: 0px 0px 20px rgba(255,102,51,0.8);
    background: rgba(255,102,51,0.8);
    opacity: 50%;
}
li.hidden{
     margin-top: 50px;
     padding: 100px;
     background-color: #fff;
     display: none;
}

li.fixtures:hover +  li.hidden{
    display: block;
}

编辑：

它仍然不工作，因为你想...你必须< li class =hidden> li class =fixtures>

it still doesn't work as you want... you have to make <li class="hidden"> child of <li class="fixtures">

这篇关于CSS：如何将鼠标悬停在一个元素上，并显示另一个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！