Question

我已经为这个问题阅读了一些解决方案，但没有一个答案可以解决我的特定问题。我在一个网站上有一个下拉菜单，我正在开发什么内容。

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

当我将鼠标悬停在下拉菜单上时，我希望箭头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;}

Answer 1

这可能无法在CSS中实现，大多数人都会使用jQuery来处理这类事情，但也许您可以尝试将悬停功能添加到.Weekday，因为当您将鼠标悬停在子菜单上时，其悬停状态将持续存在.. < / p>

如果你想用jQuery实现所需的功能，我建议你阅读这篇文章的答案：change background of parent div on hover

此外，this页面使用我提到的第一种方法 - 没有任何jQuery。

当鼠标悬停在下拉菜单项上时，父菜单项上的活动状态

1 个答案: