CSS element do not hide second bloks - html

Question

Why "zawartosc prawo" do not hide "zawartosc lewo"? on hover effect?
I try change class name, add ID, and another, but still do not work :(
Maybe I must try add some JS? But I think someone know how to do this.
Code
.zamieniamlewo {
display: none;
}
.prawo:hover ~ .zamieniamlewo {
display: block !important;
}
.lewo:hover ~ .prawo {
display: none;
}
.zamieniamprawo {
display: none;
}
.lewo:hover ~ .zamieniamprawo {
display: block !important;
}
.lewo {
background: red;
padding: 20px;
}
.prawo {
background: green;
padding: 20px;
}
<div class="lewo">
<h3>Zawartość lewo</h3>
</div>
<div class="prawo">
<h3>Zawartość prawo</h3>
</div>
<div class="zamieniamlewo">
<h3 class="imie">zamieniamlewo</h3>
</div>
<div class="zamieniamprawo">
<h3>zamieniam prawo</h3>
</div>

Answer 1

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
for example:
.red ~ p{
color:red;
}
<p>i m not red</p>
<p class='red'>i m not red</p>
<p>i m red</p>
<p>i m red</p>
here the last two paragraphs match the sibling selector.
So in your code you can change something like
<div class="prawo">
<h3>Zawartość prawo</h3>
</div>
<div class="lewo">
<h3>Zawartość lewo</h3>
</div>
and add this in .css file
.prawo:hover ~ .lewo {
display:none;
}

Answer 2

I guess you need some thing like this , i have used jquery as it seems pretty straight forward to use when you usually deal with events
$(document).ready(function(){
$(".lewo").mouseenter(function(){
$(".prawo").hide();
});
$(".lewo").mouseleave(function(){
$(".prawo").show();
$(".lewo").show();
});
$(".prawo").mouseenter(function(){
$(".lewo").hide();
});
$(".prawo").mouseleave(function(){
$(".prawo").show();
$(".lewo").show();
});
});
.zamieniamlewo {
display: none;
}
.zamieniamprawo {
display: none;
}
.lewo:hover ~ .zamieniamprawo {
display: block !important;
background:white;
}
.prawo:hover ~ .zamieniamlewo {
display: block !important;
background: white;
}
.lewo {
background: red;
padding: 20px;
}
.prawo {
background: green;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="lewo">
<h3>Zawartość lewo</h3>
</div>
<div class="prawo">
<h3>Zawartość prawo</h3>
</div>
<div class="zamieniamlewo">
<h3 class="imie">zamieniamlewo</h3>
</div>
<div class="zamieniamprawo">
<h3>zamieniam prawo</h3>
</div>