can you open a drop-down list with the hover of a button?

Question

I have a drop-down cart button in my application with the following html, in which I control the fact that it is displayed by a class variable in javascript. I'd like it to also display when the mouse passes the button, and looking for information I've only found a couple of examples that do it in css as I show below.

        <div class="action-wrapper">
          <button class='cart d-flex justify-content-center align-items-center p-0 m-0' (click)='toggleCart()'>
            <i class='icon-addcart'></i>
            <p *ngIf='itemsQuantity !== 0'>{{itemsQuantity}}</p>
          </button>
          <div class="dropdown" [ngClass]="{'disable': toggle}">
            <div class='empty' *ngIf='itemsQuantity === 0'>
              <a class='empty-title p-0 m-0'>No items</a>
            </div>
            <div class='group' *ngFor='let item of cart'>
              <div class='first-row' *ngIf='itemsQuantity !== 0'>
                <a class='title-group'>{{item.title}</a>
                <i class='icon-trash-o' (click)='deleteItem(item)'></i>
              </div>
              <div class='last-row' *ngIf='itemsQuantity !== 0'>
                <a class='quantity'>{{item.quantity | digitsFormat}}</a>
                <span class='price-group' [innerHTML]='item.price | currencyFormat'></span>
              </div>
            </div>
            <div class='action' *ngIf='itemsQuantity !== 0'>
              <ciev-button label='shop' (click)='viewDetails()'></ciev-button>
            </div>
          </div>
        </div>

on my css I'm trying to access the dropdown with the button class but I don't see a way to do it

.cart {
  background-color: $quinaryColor;
  border: none;
  border-radius: 5px;
  color: $primaryColor;
  font-size: 16px;
  width: 233px;
  height: 53px;
  line-height: 0px;
  cursor: pointer;
  margin-left: 10px;
  .icon-addcart {
    color: $primaryColor;
    font-size: 30px;
  }
  p {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    // font-weight: 600;
    background-color: $duodenaryColor;
    width: 17px;
    height: 17px;
    border-radius: 10px;
    border: 1px solid $primaryColor;
    margin-top: -4px;
    margin-left: -14px;
  }
  span {
    margin-left: 10px;
  }
  &:hover{
    background-color: $duodenaryColor;
    cursor: pointer;
    .dropdown {
      display: block;
    }
  }
  &:focus {
    outline: none;
  }
  &:disabled {
    background: $secondaryColor;
    cursor: not-allowed;
  }
}

.dropdown {
  list-style: none;
  position: absolute;
  background-color: $primaryColor;
  border: 1px solid $secondaryColor;
  box-sizing: border-box;
  box-shadow: 1px 1px 4px rgba(35, 50, 64, 0.2);
  border-radius: 5px;
  padding: 20px;
  width: 281px;
  max-height: 450px;
  overflow: auto;
  margin: 0.6% 0 0 -2%;
  &::-webkit-scrollbar {
    width: 1px;
  }
  &.disable {
    display: none;
  }
  .group {
    border-bottom: 1px solid $uiFooterColor;
    padding: 8px;
  }
  .empty {
    display: flex;
    justify-content: center;
    .empty-title {
      font-weight: 600;
      font-size: 12px;
      line-height: 19px;
      color: $quaternaryColor;
      margin-bottom: 10px;
    }
  }
  .first-row {
    display: flex;
    justify-content: space-between;
    margin: 0 0 5px 0;
  }
  .last-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: -20px;
  }
  .title-group {
    font-weight: 600;
    font-size: 13px;
    line-height: 19px;
    color: $quaternaryColor;
  }
  .name {
    font-weight: 600;
    font-size: 13px;
    line-height: 19px;
    color: $quaternaryColor;
  }
  .quantity {
    font-size: 13px;
    line-height: 19px;
    color: $octonaryColor;
    border: none;
    margin-left: -60px;
  }
  .price-group {
    font-size: 12px;
    line-height: 19px;
    text-align: right;
    color: $octonaryColor;
    .ordinal {
      color: $octonaryColor !important;
    }
  }
  .icon-trash-o {
    color: $quinaryColor;
    cursor: pointer;
  }
  .action {
    margin-top: 5px;
    // position: sticky;
    // bottom: 0;
  }
}

is it possible to make it deploy with the css having it already controlled with javascript?

Answer 1

HTML

<div class="dropdown">
 <button class="dropbtn">Dropdown</button>
 <div class="dropdown-content">
   <a href="#">Link 1</a>
   <a href="#">Link 2</a>
   <a href="#">Link 3</a>
 </div>
</div> 

CSS

 /* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}