HTML Select (active disabled attribute) - How to display a message when mouseover is triggered?

Question

Good morning,

I am developing a menu where options are linked by selects.

All selects are disabled, and will be released only when a radio master input is triggered.

So far it’s working okay. However, I need to put a warning on the disabled selects, which tells the user that for this select to work, you need to click the radio input.

I made a test with select in active mode and worked smoothly, but in disabled mode only appears the cut red ball, warning that can not use at the time.

Would anyone have any idea how I could program this ?

Thanks in advance.

Answer 1

Dude I made an example here just made with CSS, I don’t know how the project is going there, if I needed the mouseover for other things, but if I could use the :Hover CSS follows the example.

$(document).ready(function() {
    $("input[type=radio]").on("click", function() {
    $("select").prop("disabled", false);
    $(".mensagem").css("display","none");
  })
})

.mensagem {
  display: none;
  margin-top: 5px;
  padding: 5px;
  width: 50%;
  border-radius: 4px;
  background-color: #FF5733;
  color: #fff;
  text-align:  center;
}
select:hover ~ .mensagem {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select disabled>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="radio">

<div class="mensagem">
  <p>Clique no radio para habilitar o menu</p>
</div>

Answer 2

If you want something simple with just CSS I made this very basic template. NOTE: It doesn’t let btn disabled, it just doesn’t let the user interact with the field.

input + .holder:hover::after {
    content: "clique no btn primeiro";
    width: auto;
    height: auto;
    background-color: red;
}
input:checked + .holder:hover::after {
    content: "";
}
input + .holder > select {
    -ms-touch-select: none;
    touch-action: none;
    pointer-events: none;
    color: silver;
}
input:checked + .holder > select {
    -ms-touch-select: unset;
    touch-action: unset;
    pointer-events: unset;
    color: initial;
}

Btn<input type="radio">
<div class="holder">
    <select name="lista" id="lista" tabindex="-1">
        <option value="">Um</option>
        <option value="">Dois</option>
        <option value="">Três</option>
    </select>
</div>