具有！important :: CSS的多个类选择器

Question

这是我的问题：我想做一个事情，当您将鼠标悬停在一个对象上时，它消失了，但是出现了另一个对象。 我为我的代码尝试了这个：

h1.title:hover + .ps{
    visibility: visible;
}
h1.title:hover !important{
    visibility: hidden !important;
}
.ps{
    visibility: hidden;
}

Answer 1

我想你想要这样的东西：

jsfiddle

重要提示： h1.title:hover !important{这是不正确的， !important必须在{}内，并且在css属性之后，例如opacity:1!important

代码添加了PS我使用了不透明度而不是可见性...但是您可以根据需要进行更改

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

了解不透明度和可见性之间的差异，请阅读此处

事实是，如果您使用opacity则对象会消失（淡出），但仍然存在（占用空间），并且如果您在同一位置有另一个对象，则可以访问它。

但在visibility的情况下，它与opacity具有完全相同的作用，但是您无法访问其背后的元素。

在您的情况下，h1标题是触发悬停效果的标题，因此...即使隐藏了它，您仍然需要能够“触摸”它，这就是为什么需要不透明的原因。 这就是为什么如果您使用visibility效果不会那么好

但

如果要使用visibility ，请删除过渡，因为可见性具有二进制设置（可见/隐藏），而不是** calcableable **属性（1,0），因此transition不适用于可见性

然后使用此代码：

.container p {
    visibility:hidden;
}

.container:hover h1 {
  visibility:hidden;
}
.container:hover  h1+p {
  visibility:visible;
}

Answer 2

这是实现您想要的逻辑。

 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

您必须使用javacript（最好使用jquery –它只会使事情变得更简单）。

 $("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>