带有 !important :: CSS 的多个类选择器答案

【问题标题】：Multiple Class Selectors with !important :: CSS带有 !important :: CSS 的多个类选择器
【发布时间】：2016-07-08 14:11:48
【问题描述】：

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

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

【问题讨论】：

请同时添加您的html代码
您可以将 !important 与 css 属性一起使用，而不是 css 选择器

标签： html css hover css-specificity

【解决方案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;
}

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

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

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

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

但是

如果您想使用 visibility ，请删除过渡，因为可见性具有 binary 设置（可见/隐藏）而不是 **calculable ** 属性 (1,0) ，等等transition 不适用于可见性

然后使用此代码：

.container p {
    visibility:hidden;
}

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

【讨论】：

它似乎适用于不透明度而不是可见性。感谢您的回复！
是否需要添加任何额外的代码才能将不透明度替换为 z-index 之类的可见性？
用完整的解释编辑了我的答案 :) 希望我解释得很好
谢谢！这样可行。唯一的问题是它会闪烁，就像我将鼠标悬停在它上面然后将鼠标移开一样，只会重复而且速度更快。

【解决方案2】：

这是实现您想要的逻辑。

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

}

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

【讨论】：

【解决方案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>

【讨论】：