Multiple Class Selectors with !important :: CSS - html

Question

Here is my problem: I want to make a thing, where when you hover over one object, it disappears, but another object appears. I tried this for my code:
h1.title:hover + .ps{
visibility: visible;
}
h1.title:hover !important{
visibility: hidden !important;
}
.ps{
visibility: hidden;
}

Answer 1

i guess you want smth like this :
jsfiddle
IMPORTANT : h1.title:hover !important{ this is not correct , the !important must be inside the {} and after the css properties for example opacity:1!important
code added
PS i used opacity instead of visibility...but you can change it if you want
html :
<div class="container">
<h1>TITLE</h1>
<p>Other text</p>
</div>
css :
.container {
position:relative;
}
h1 {
font-size:40px;
color:red;
line-height:48px;
margin:0;
transition:0.3s;
}
.container p {
position:absolute;
top:0;
font-size:35px;
line-height:40px;
color:blue;
margin:0;
transition:0.3s;
opacity:0;
z-index:-1;
}
.container h1:hover {
opacity:0;
}
.container h1:hover + p {
opacity:1;
}
to see differences between opacity and visibility read here
the fact is that if you use opacity the object disappears ( fades out ) but it's still there ( occupies space ) and if you have another object in the same place you can access it.
but in the case of visibility , it does the same exact thing as opacity but you can't access the element behind it.
in your case, the h1 title is the one triggering the hover effect and so...even though you hide it, you still need to be able to ' touch ' it, that's why you need opacity. and that's why if you use visibility the effect will not be so nice
BUT
if you want to use visibility , remove the transition , because visibility has a binary setting (visible/hidden) not a **calculable ** property (1,0) , and so transition doesn't work with visibility
and then use this code :
.container p {
visibility:hidden;
}
.container:hover h1 {
visibility:hidden;
}
.container:hover h1+p {
visibility:visible;
}

Answer 2

Here is the logic to achieve what you want.
div {
display: none;
}
a:hover + div {
display: block;
}
a:hover {
display: none;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Answer 3

You have to use javacript (it's best to use jquery – it just makes things simpler).
$("p.show").hide();
function hide() {
$("p.show").show();
$("p.hide").hide();
}
p.show {
visibility: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p class='hide' onmouseover='hide()'>Hover on me</p>
<p class='show'>Done!</p>