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

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 定位元素的前一个同级元素，请参阅此答案。

但是，您可以更改标记的顺序，然后使用

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 流中当前元素after 的同级元素。没有 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>