0

Greetings all and pardon my novice. I am using typescript, vuejs, html, and sass for this particular issue. I am trying to think of a way to outline my employee name in red when a user hovers over my disabled next button. I cant really think of a way to do this, so any advice would be extremely appreciated. There is a decent amount of code to this problem, but I will try to keep it to a minimum. Here is the code.

Next button that displays a "Please confirm your order before submitting " message when hovered on disabled next button.

  <button
      class="button"
      :disabled="displayStore.nextDisabled"
      :class="{ disabled: displayStore.nextDisabled }"
      id="nextButton"
      @click="nextPage()"
    >
      <span>{{ displayStore.nextButtonText }}
      <span id="reminderSpan" class="hide">Please confirm your order before submitting</span>
      </span>
    </button>

Sass for next and disabled fields

#nextButton
  grid-area: nextButton
  justify-self: start

.button
  border: 1px solid $primary-accent-color
  font-size: 1.5rem
  border-radius: .25rem
  cursor: pointer
  padding: .25rem .75rem
  transition: background .3s, color .3s
  color: $primary-accent-color
  background: transparent

  flex-direction: row
  justify-content: center
  align-items: center

  &:hover
    color: $tertiary-background
    background: $primary-accent-color

.disabled
  border: 1px solid $secondary-text-color
  cursor: default
  color: $secondary-text-color
  background: transparent

  &:hover
    background: transparent
    color: $secondary-text-color
    cursor: not-allowed

    .hide
      display: block

This is what determines whether or not the button is disabled without a selected name

async mounted() {
    this.displayStore.disableText = "Next"
    if (this.selectedName == "") {
      this.displayStore.nextDisabled = true

  }

This is my display store. At the moment the disabledText field was going to be used to display a different message, as I have multiple pages that display the same message when disabled, but instead I figure it would be easier to have a universal message and display something like " Address unresolved issues" and create a red border around my selected user field

And Lastly, Here is my Selected user Html and Sass.

html:

<div style="grid-area: name;" class="body">
<SelectDropdown
          id="employeeSelect"
          class="dropDown"
          :options="names"
          placeholder="Select Employee"
          v-model="selectedName"
          @keyup="selected = !selected"
        />
      </div>

Sass: For the Dropdown

.body
  background-color: white
  color: $primary-text-color
  font-size: 1rem
  border: 1px solid transparentize($primary-text-color, .7)
  border-radius: .25rem
  width: 15rem
  min-height: 1rem
  padding: .375rem .75rem
  transform: scale(130%, 130%)
  z-index: 10 !important

  .noBorder
    font-size: 1rem
    border: 1px solid transparentize($primary-text-color, 1)
    width: 15rem
    padding: .375rem .75rem
    outline: none
    z-index: 10
    // border: 1px
    // background-color: white
    // color: $primary-text-color
    // border-radius: .25rem
    // min-height: 1rem
    // transform: scale(100%, 100%)
santaclause
  • 3
  • 2

1 Answers1

0

Maybe you only need to use CSS for that:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>

        <style>
            h3{
                color: blue;
            }
            button:disable:hover ~ h3{
                color: red;
            }
        </style>
    </head>
    <body>
        <button disabled>
            disabled
        </button>

        <h3>Test</h3>
    </body>
</html>

The ~ symbol use to specify where the element h3 are. Here is the reference to that: How to affect other elements when one element is hovered.

Sokmontrey
  • 31
  • 2