1

ナビゲーション パネルがあり、フィクスチャにカーソルを合わせると<div>、メイン ナビゲーション パネルからドロップダウンするパネルに最初の 5 つほどのフィクスチャが表示されます。

でCSSを使用してこれを達成しようとしてい:hoverます。:hoverこれは取得しようとしている imの例です: 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;
}

回答ありがとうございます。

4

2 に答える 2

4

これのことですか？

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

于 2013-06-26T15:45:39.273 に答える
0

これは、css の「継承」値を使用して行うことができます。この投稿と以下のデモをチェックしてください: http://joshnh.com/2012/10/25/dont-forget-the-css-value-inherit/

于 2013-06-26T16:22:31.187 に答える