Orion31 Orion31 - 4 months ago 9
CSS Question

Multiple Class Selectors with !important :: CSS

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

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