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 < / p>

代码已添加 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对象消失（淡出）但它仍然存在（占用空间），如果您在同一个地方有另一个对象，则可以访问它

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

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

<强> BUT

如果您想使用visibility，请删除转换，因为可见性具有二进制设置（可见/隐藏）而不是**可计算**属性（1,0），因此transition无法使用可见性

然后使用此代码：

.container p {
    visibility:hidden;
}

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

Answer 2

这是实现你想要的逻辑。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你必须使用javacript（它最好使用jquery - 它只是简化了事情）。

＆＃13;

$("p.show").hide();
function hide() {
  $("p.show").show();
  $("p.hide").hide();
}

＆＃13;

p.show {
  visibility: none;
}

＆＃13;

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

＆＃13;

多个类选择器，带有！important :: CSS

3 个答案: