具有！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>