CSS selector hide and show depending hover effect

Question

I am trying to hide one DOM element with CSS (by hovering on its sibling) but it is not working correctly.

In the .cta_call class I have hover effect to change the background-colorbut it is needed to hide the element .cta_telf when the user does that interaction.

Here one example:

.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>

Any clue what am I doing wrong?

Thank you.

Answer 1

The ~ selector targets subsequent siblings in the markup. You cannot target an element's previous sibling with CSS, see this answer.

However, you could change the order of the markup and then use position, float, display:grid, or similar to move them visually.

An example using 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>