Question

我正在尝试使用CSS隐藏一个DOM元素（通过将其悬停在同级元素上），但是它无法正常工作。

在.cta_call类中，我具有悬停效果来更改background-color，但是在用户进行交互时需要隐藏元素.cta_telf。

这里是一个例子：

.cta {
    width: auto;
    padding: 0px;
    margin: -30px 0px 0px 0px;
    top: 0px;
    text-align: center;
    height: 70px;
}
.cta_telf{
    margin: 0px 0px 0px 22px;
    padding: 0px;
    width: 75px;
    background-color: white;
    z-index: 1984;
    margin-bottom: -5px;
    font-size: 12px;
    color:red;
    position: sticky;
    text-align: center;
}

.cta_call{
    border: solid 2px red;
    border-radius: 50px;
    padding: 8px 15px 8px 15px;
    height: 35px;
    z-index: 1985;
}

.cta_call:hover {
	background-color: red;
	color:white
}
.cta_call:hover ~ .cta_telf{
	visibility: hidden
}

<p class="cta_telf">xxxxxx</p>
<p class="cta_call">¿HABLAMOS?</p>

任何提示我在做什么错吗？

谢谢。

Answer 1

~选择器针对标记中的后续兄弟姐妹。您无法使用CSS定位元素的先前同级，请参见this answer。

但是，您可以更改标记的顺序，然后使用position，float，display:grid或类似的方法在视觉上移动它们。

使用position:absolute的示例：

.cta {
    position:relative;
    padding-top:1em; /* Space for absolute .cta_telf */
}
.cta_telf {
    position:absolute;
    top:0; 
    left:0;
    padding: 0px;
    width: 75px;
    background-color: white;
    z-index: 1984;
    font-size: 12px;
    color:red;
    text-align: center;
}
.cta_call {
    border: solid 2px red;
    border-radius: 50px;
    padding: 8px 15px 8px 15px;
    height: 35px;
    z-index: 1985;
}

.cta_call:hover {
	background-color: red;
	color:white
}
.cta_call:hover ~ .cta_telf {
	visibility: hidden;
}

<div class="cta">
    <p class="cta_call">¿HABLAMOS?</p>
    <p class="cta_telf">xxxxxx</p>
</div>

Answer 2

您现在知道，~仅在HTML流中当前元素之后的后定位。
没有CSS选择器可以定位元素的上一个兄弟姐妹。

无论如何，我建议您在HTML中重新排列元素，并使用display: flex。
这样，您可以使用order属性来实现所需的功能。
（order属性非常容易理解！）

工作片段：

.cta {
  display: flex;           /* Added */
  flex-direction: column;  /* Added */
  width: auto;
  padding: 0px;
  top: 0px;
  text-align: center;
  height: 70px;
}

.cta_telf {
  margin: 0px 0px 0px 22px;
  padding: 0px;
  width: 75px;
  background-color: white;
  z-index: 1984;
  margin-bottom: -5px;
  font-size: 12px;
  color: red;
  position: sticky;
  text-align: center;
  order: 1; /* Added */
}

.cta_call {
  border: solid 2px red;
  border-radius: 50px;
  padding: 8px 15px 8px 15px;
  height: 35px;
  z-index: 1985;
  order: 2; /* Added */
}

.cta_call:hover {
  background-color: red;
  color: white
}

.cta_call:hover~.cta_telf {
  visibility: hidden
}

<div class="cta"><!-- Added -->
  <!-- Changed order below -->
  <p class="cta_call">¿HABLAMOS?</p>
  <p class="cta_telf">xxxxxx</p>
</div>

希望有帮助。

CSS选择器隐藏和显示取决于悬停效果

2 个答案: