Блог

Пытаюсь использовать свойство .class:hover > .OtherClass в CSS, чтобы изменить непрозрачность другого класса с 0 на 1.

В этом примере .class — это SVG-файл bicycle, который я грубо отредактировал (код пути svg — это монстр speghetti, извините — не жаль, потому что это работает). .OtherClass — это свойство, связанное с div для отображения трех следующих элементов li в ul. (На самом деле меня не волнует, как они выглядят в данный момент, просто хочу правильно настроить таргетинг на группу в css).

Идея в том, что при наведении курсора мыши на SVG-файл bicycle откроется выпадающее меню — грубо. Код ниже:

В течение последних двух часов я пробовал разные методы таргетинга на вложенный .OtherClass безрезультатно.

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

При наведении курсора мыши на SVG значение выпадающего списка должно изменить свою непрозрачность с 0 на 1.

Частично проблема заключается в том, что у вас искаженный SVG. Вы не можете разместить HTML-код внутри SVG, не пометив его как посторонний объект… Это потому, что SVG является XML Namespace таким же, как HTML. (Именованные XML-узлы интерпретируются определенным образом).

Вот документация для SVG foreignObject .

Однако я бы избежал этого, просто переместив ваш .drop div ЗА пределы тега SVG.Затем используйте селектор «следующий брат» вместо «прямого дочернего элемента».

 .bike:hover {
  fill: blue;
}
.bike:hover   .drop {
  background-color: blue;
  opacity:1;
}
  

Также fill:color недопустимо для объектов HTML, используйте background-color вместо этого. Это может быть причиной того, что ваш браузер игнорирует CSS после ошибки.