Multiple Class Selectors with !important :: CSS

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

You can use `!important` with css properties not css selectors — Kld, Jul 08 '16 at 14:19

score 1 · Accepted Answer · edited May 23 '17 at 12:16

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

It seemed to work with opacity instead of visibility. Thank you for your response! — Orion31, Jul 08 '16 at 14:38
Is there any extra code I need to put in to be able to substitute opacity with visibility like the `z-index`? — Orion31, Jul 08 '16 at 14:42
edited my answers with a complete explanation :) hope i explained ok — Mihai T, Jul 08 '16 at 15:00
Thanks! That works. The only problem is that it flashes like I am hovering over it and then moving my mouse away, only repeated and much faster. — Orion31, Jul 08 '16 at 19:26

score 0 · Answer 2 · answered Jul 08 '16 at 14:20

0

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>

answered Jul 08 '16 at 14:20

Shank

1,387
11
32

score 0 · Answer 3 · answered Jul 08 '16 at 14:22

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>

Multiple Class Selectors with !important :: CSS

3 Answers3