enabling a div when hovering over a certain object

Question

Hej, I want to enable (modify opacity) a div, when hovering over a certain object.

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

This works.

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

This works. However.

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

This does not work and i wonder why.

The html in question looks like this:

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

The "menu" code is automatically generated from Joomla. Is there a CSS way to have the submenu only visible, when i hover over the current/active menu element?

Thanx for any insight.

Please provide a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). Please look at guide [how do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — Andrzej Ziółek, Jul 05 '18 at 07:31
No, that is not possible using this structure - because the submenu is not a _sibling_ of the list item. (And before you ask - [no, there is no parent selector in CSS](https://stackoverflow.com/q/1014861/1427878) …) — CBroe, Jul 05 '18 at 07:34

Maharkus · Answer 1 · 2018-07-05T07:47:05.670

The + selector is looking for an element that isnt there.

From the MDN:

The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.

For it to work you would need to put css-submenu inside ul as a li and right after 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>

score -2 · Answer 2 · answered Jul 05 '18 at 07:37

-2

Hope this will work for you :)

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

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

answered Jul 05 '18 at 07:37

Deepak Verma

617
5
18

enabling a div when hovering over a certain object

2 Answers2