Effect sibling element on hover using sass

Question

I have two elements in a div. One of them is hidden and I want to show it when someone hover on the visible one. Through normal CSS I have done this, but I am unable to do this through SASS.

Here is my code:

<div class"main">
<a href="#"> Link to my account </a>
<p> john </p>
</div>

I have tried it but it doesn't work for me.

.main {
    position: relative;

    a {
        font-size: 19px;
    }

    p {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 18px;
        background: gray;
        padding: 2px 6px;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    a:hover p {
        visibility: visible;
    }
}

So how to make the p tag visible when someone hover on the a tag using SASS?

score 4 · Accepted Answer · answered Oct 24 '19 at 06:48

4

It's not a SASS problem, you just have to use the adjacent sibling combinator:

a:hover + p {
   visibility: visible;
}

answered Oct 24 '19 at 06:48

Arkellys

5,562
2
16
40

you can also use :-a:hover >p { visibility: visible; } – Arpit Jain Oct 24 '19 at 06:50
4

No @ArpitJain. `>` is a immediate child selector not for sibling ! – Allan Jebaraj Oct 24 '19 at 06:50
yes, It's working now. Thanks – Shakil Ahmad Oct 24 '19 at 06:54
@ArpitJain `>` using for the first child. – Shakil Ahmad Oct 24 '19 at 06:55

score 1 · Answer 2 · answered Oct 24 '19 at 06:49

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.The following change should help you.

.main {
    position: relative;

    a {
        font-size: 19px;
    }

    p {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 18px;
        background: gray;
        padding: 2px 6px;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    a:hover + p {
        visibility: visible;
    }
}

Refer: https://www.w3schools.com/Css/css_combinators.asp

Yes, Amazing it's working. Thanks for a quick response. – Shakil Ahmad Oct 24 '19 at 06:52 — Shakil Ahmad, Oct 24 '19 at 06:52

Effect sibling element on hover using sass

2 Answers2