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.

score 0 · Accepted Answer · answered Aug 09 '18 at 11:31

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>

score 0 · Answer 2 · answered Aug 10 '18 at 07:48

As you know now, ~ will only target sibling elements after the current one in the HTML flow.
There is no CSS selector to target an element's previous sibling.

Anyway, I suggest you to reorder your elements in the HTML, and use display: flex.
That way, you can use the order property to achieve what you want.
(The order property make it crystal clear to understand!)

Working snippet:

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

Hope it helps.

CSS selector hide and show depending hover effect

2 Answers2