0

この問題の解決策をいくつか読みましたが、特定の問題の解決に役立つ回答はありません。What's Onセクションで開発中のサイトにドロップダウンのあるメニューがあります。

http://www.staging.alexanderdzine.com.au/golden-sands-tavern-V2/

ドロップダウンliにカーソルを合わせたときに矢印bgをアクティブのままにしたいのですが、わかりません。

HTML

<div class="Weekday">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">Monday</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="../html/whats-on.html"><img src="../images/backgrounds/test.jpg" width="230" height="280" alt="" title="" /></a></li>
</ul>
</dd>
</dl>
</div> <!-- end Weekday div -->

CSS

.dropdown {float:left;}
.dropdown dt{width:114px;padding:0;font-weight:bold;cursor:pointer;line-height:50px;text-align:center;color:#193540;font-size:14px;letter-spacing:1px;text-transform:uppercase;}
.dropdown dt:hover {background:url(../images/backgrounds/bkg_nav-dropdown.png) center no-repeat;}
.dropdown dd {position:relative;left:-135px;overflow:hidden;width:250px;display:none;z-index:200;opacity:0;right:0;}
.dropdown ul {width:250px;list-style:none;}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited{display:block;background:#6ab7d3;width:250px !important;height:300px !important;}
.dropdown img{background:#6ab7d3;padding:10px;}
4

1 に答える 1

0

これを CSS で実現するのは不可能かもしれません。ほとんどの人は、このようなことには jQuery を使用しますが、.Weekday にホバー機能を追加してみてください。サブメニューにカーソルを合わせている間、ホバー状態が持続するためです。

jQueryで目的の機能を実現したい場合は、この投稿への回答を読むことをお勧めします:ホバー時に親divの背景を変更する

また、このページでは、jQuery を使用せずに、最初に説明した方法を使用しています。

于 2013-02-12T14:50:56.820 に答える