CODEWITHSUNDEEP
csssass
Gaurav Soni
Gaurav Soni

Reputation: 411

nesting multiple classes using sass

I'm trying to nest multiple class using sass. I want to use hover to show a button. My scss is as follows:

.item{
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

   .Button{
      visibility: hidden;

        &:hover{
          visibility: visible;
        }
    }
}

this is shown in css as :

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green; }

  .item .Button {
    visibility: hidden; }

    .item .Button:hover {
      visibility: visible; }

The hover property is not working here.

Upvotes: 1

Views: 689

Answers (2)

Leonardo Costa
Leonardo Costa

Reputation: 470

try this:

.item{
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

  &:hover {
    .btn {
      visibility: visible;
    }
  }
  .btn{
    visibility: hidden;
  }
}

Upvotes: 0

Stephen C
Stephen C

Reputation: 863

Since the button is already hidden, I would put the visible property on the item:hover instead.

How the SCSS should look:

.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green;

  .Button {
    visibility: hidden;
  }

  &:hover .Button {
    visibility: visible;
  }
}


.item {
  border-bottom: 1px dotted #ccc;
  text-indent: 50px;
  height: 81%;
  padding: 2px;
  text-transform: capitalize;
  color: green; 
}

.item .Button {
  visibility: hidden; 
}

.item:hover .Button {
  visibility: visible; 
}
<div class="item">
  Hover Item Class
  <button class="Button">button shows</button>
</div>

Upvotes: 2

Related Questions