Во-первых, действительно, публикуйте код в песочнице типа jsfiddle.
Во-вторых, вы документацию на CSS-селекторы читали? Селектор ~ называется sibling, что означает, что это должны быть элементы одного уровня (потомки одного уровня одного и того же родителя).
В-третьих, когда пытаетесь использовать что-то новое, начинайте с простого, чтобы не гадать, что же именно не работает.
Если вы попробуете тупо вот это:
<div class="tap_R31">Нажмите чтобы подсветить элемент R31</div>
<ul>
<li>1</li>
<li>2</li>
</ul>
и вот такой CSS:
.tap_R31:hover ~ li {
background-color:yellow
}
Оно у вас точно также не сработает. Зато, сразу ясно, что дело, например, не в SVG.
Так вот, чтобы пример выше сработал, нужно писать
.tap_R31:hover ~ ul li, тогда части селектора до ~ и после него будут начинаться с элементов одного уровня и все заработает.
