Question

嘿，当我将鼠标悬停在某个对象上时，我想启用（修改不透明度）一个div。

#css_menu > .menu > .current:hover{
    background-color:#066;}

这有效。

#css_menu:hover + .css_submenu {
    background-color:#F63;
    opacity: 1.0;
}

这有效。但是。

#css_menu > .menu > .current:hover + .css_submenu{
    background-color:#F63;
    opacity: 1.0;
}

这不起作用，我想知道为什么。

有问题的html看起来像这样：

<div class="css_menu" id="css_menu">
<ul class="menu">
<li id="item-122" class="current active"><a href="/index.php/de/" ><span>Galerie</span></a></li><li id="item-133"><a href="/index.php/de/menue-2" ><span>Menü</span></a></li></ul></div>
<div class="css_submenu" id="css_submenu">....</div>

“菜单”代码是从Joomla自动生成的。当我将鼠标悬停在当前/活动菜单元素上时，是否有CSS方法仅使子菜单可见？

感谢您提供任何见识。

Answer 1

+选择器正在寻找在那里不存在的元素。

来自MDN：

+组合器选择相邻兄弟姐妹。这意味着第二个元素直接跟随第一个元素，并且它们共享相同的父元素。

要使其正常工作，您需要将css-submenu内的ul作为li放置在current之后：

#css_menu>.menu>.current:hover+.css_submenu {
  background-color: #F63;
  max-height: 100px;
  opacity: 1.0;
  transition-duration: .7s;
}

.css_submenu {
  max-height: 0;
  opacity: 0;
  transition-duration: .3s;
}

<div class="css_menu" id="css_menu">
  <ul class="menu">
    <li id="item-122" class="current active">
      <a href="/index.php/de/"><span>Galerie</span></a>
    </li>
    <li class="css_submenu" id="css_submenu">This will now have the hover effect</li>
    <li id="item-133"><a href="/index.php/de/menue-2"><span>Menü</span></a></li>
  </ul>
</div>

Answer 2

希望这对您有用：）

div {
    background-color:green;
    color:white;
}
    
a:hover + div {
    opacity:.1
}

<a>Hover over me!</a>
<div>Change opacity on hover</div>

将鼠标悬停在某个对象上时启用div

2 个答案: