Styjun

Trying to use the .class:hover > .otherClass property in CSS to change the opacity of the otherClass from 0 to 1.

In this example .class is a bicycle SVG I crudely editted (the svg path code is a speghetti monster, I'm sorry-not sorry because it works). The .otherClass is a property linked to a div to reveal three nexted li's within ul's. (Don't really care about how they look at the moment just want to target the group correctly within css).

The idea is when I hover over the bicycle SVG the dropdown menu will be revealed--crudely. Code below:

I've tried for the last two hours different methods of targeting the nested .otherClass to no avail.

HTML:

<div ="nav">

<svg class = "bike" viewBox="0 0 625 355" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
 style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
 <g id="Bike"><path d="M108.706,153.568c51.739,0.588 93.266,43.071 92.678,94.81c-0.589,51.739 -43.072,93.266 -94.811,92.677c-51.738,-0.588 -93.266,-43.071 -92.677,-94.81c0.588,-51.739 43.071,-93.266 94.81,-92.677Z"
 style="fill:none;stroke:#000;stroke-width:12.5px;"/><path d="M107.758,236.896c5.749,0.065 10.363,4.785 10.298,10.534c-0.066,5.749 -4.786,10.363 -10.535,10.298c-5.748,-0.066 -10.363,-4.786 -10.297,-10.535c0.065,-5.749 4.785,-10.363 10.534,-10.297Z"/>
 <path d="M517.132,147.796c51.738,0.589 93.266,43.072 92.677,94.81c-0.588,51.739 -43.072,93.267 -94.81,92.678c-51.739,-0.588 -93.266,-43.072 -92.678,-94.81c0.589,-51.739 43.072,-93.266 94.811,-92.678Z"
 style="fill:none;stroke:#000;stroke-width:12.5px;"/><path d="M516.184,231.124c5.748,0.066 10.363,4.786 10.297,10.535c-0.065,5.748 -4.786,10.363 -10.534,10.297c-5.749,-0.065 -10.363,-4.786 -10.298,-10.534c0.066,-5.749 4.786,-10.363 10.535,-10.298Z"/>
 <path d="this path is absolutely massive, not including it"/>
 </g>

 <div class="drop">
 <ul>
 <li>
 <ul class="dropdown">
 <li><a href="#">Sub-1</a></li>
 <li><a href="#">Sub-2</a></li>
 <li><a href="#">Sub-3</a></li>
 </ul>
 </li>
 </ul>
 </div>

</svg>

</div>

CSS:

.bike 
 top: 5%;
 left: 5%;
 z-index: 5;
 float: center;
 width: 15%;
 position: absolute;


.bike:hover, .bike:hover > .drop 
 fill: blue;
 opacity:1;



.drop 
 opacity:0;


ul
 color: green;
 width: 100px;
 height: 100px;


li
 color: blue;
 width: 100px;
 height: 50px;

When you hover over the SVG, the dropdown mean should change it's opacity from 0 to 1.

Part of the problem is that you've got a malformed SVG. You can't have HTML code inside of an SVG without marking it as a foreign object... This is because SVG is an XML Namespace just like HTML. (Named XML nodes are interpreted a specific way).

Here's documentation for SVG foreignObject.

However, I would avoid that by simply moving your .drop div OUTSIDE the SVG tag. Then use the "next sibling" selector instead of the "direct child".

.bike:hover 
 fill: blue;

.bike:hover + .drop 
 background-color: blue;
 opacity:1;

Also fill:color isn't valid on HTML entities, use background-color instead. This may be causing your browser to ignore the CSS after the error.