How to give hover effect to next div using css - html

Question

I want to give hover effect to specific div, but that div is not a child of that div, which I hover
I have code, so, you can understand
$(".pannel-icon").click(function(){
$(".opening-menu").toggleClass('show');
});
body{overflow:hidden}
a{cursor:pointer}
.opening-menu{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}
.main-menu{float:right}
.show{right:0;transition:0.2s all linear}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="main-menu">
<span>coins:$100</span>
<a class="pannel-icon">
<span class="pannel-menu-hover">Menu</span>
</a>
</div>
<div class="opening-menu">
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
</div>
Inside this code, I want to hover .opening-menu when I hover .pannel-icon.

Answer 1

is it your answer?
$(".pannel-icon, .opening-menu").hover(function(){
$(".opening-menu").toggleClass('show');
});
body{overflow:hidden}
a{cursor:pointer}
.opening-menu{float:right;position:absolute;right:-100px; top: 10px;transition:0.2s all linear}
.main-menu{float:right}
.show{right:0;transition:0.2s all linear}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="main-menu">
<span>coins:$100</span>
<a class="pannel-icon">
<span class="pannel-menu-hover">Menu</span>
</a>
</div>
<div class="opening-menu">
<ul>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
<li>menu1</li>
</ul>
</div>

Answer 2

I think I see what you're saying, check this Fiddle: https://jsfiddle.net/nhnb9a5g/1/. If you hover over Menu, the menu appears but then disappears as soon as you try and click an item?
If so, check this revised fiddle: https://jsfiddle.net/zm93hL3e/3/
Add the following jQuery:
$(".pannel-icon, .opening-menu").hover(function(){
$(".opening-menu").toggleClass('show');
});

Answer 3

You could use a jquery hover function or selector to achieve this. But I prefer to place the opening-menu within the link. That way it's always hovered when you are hovering an item in the menu.

Answer 4

If I've understand correctly your question, do you want to change CSS properties in the class called opening-menu, right?
So, you can add in your CSS:
.opening-menu:hover{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}
The complete CSS code will be:
body{overflow:hidden}
a{cursor:pointer}
.opening-menu:hover{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}
.main-menu{float:right}
.show:hover{right:0;transition:0.2s all linear}
Alternatively, you can use a javascript function like this:
$(".pannel-icon").hover(hoverDiv);
function hoverDiv(){
$(".opening-menu").css({
'float':'right';
'position':'absolute';
'right':'-100px';
'top': '50px';
'transition':'0.2s'})
}