时间戳

首页 > 解决方案 > CSS选择器隐藏和显示取决于悬停效果

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

问题描述

我正在尝试使用 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>

任何线索我做错了什么？

谢谢你。

标签： csscss-selectors

解决方案

选择器以标记中的后续兄弟为目标~。您不能使用 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>

推荐阅读