带有 !important :: CSS 的多个 Class 选择器

Question

这是我的问题：我想做一个东西，当你将鼠标悬停在一个物体上时，它会消失，但另一个物体会出现。我为我的代码试过这个：

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

Answer 1

这是实现你想要的逻辑。

div {
    display: none;
}
    
a:hover + div {
    display: block;
}
a:hover {
   display: none;

}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

Answer 2

我猜你想要这样的东西:

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

查看不透明度和可见性之间的差异 read here

事实是，如果你使用 opacity，object 会消失（淡出）但它仍然存在（占据 space），如果你有另一个 object在同一个地方你可以访问它。

但在 visibility 的情况下，它与 opacity 做同样的事情，但你不能访问它后面的元素。

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

但是

如果你想使用 visibility ，删除过渡，因为可见性有一个 binary 设置（visible/hidden）不是**可计算的** 属性 (1,0) ，因此 transition 不适用于 visibility

然后使用此代码：

.container p {
    visibility:hidden;
}

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

Answer 3

你必须使用 javascript（最好使用 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>

带有 !important :: CSS 的多个 Class 选择器

Multiple Class Selectors with !important :: CSS

html

css

hover

css-specificity