In the following HTML code, a form is displayed inside a card HTML. The form appears after an onlick function which functions correctly. However, the submit button in the form below does not display a hover effect.
<!-- Update details form here -->
<div class="UpdateForm-section">
<form action="/add_address" method="post">
<label>Car Name</label>
<input type="text" value="" name="ev_name" placeholder="Model name"><br>
<label>Manufacturer</label>
<input type="text" value="" name="ev_manufacturer" placeholder="Brand name"><br>
<label>Year</label>
<input type="number" value="" name="ev_year" placeholder="YYYY"><br>
<label>Battery size</label>
<input type="number" value="" step="any" name="ev_battery" placeholder="Capacity in Kwh"><br>
<label>Range</label>
<input type="number" value="" name="ev_range" placeholder="Range in Km"><br>
<label>Cost</label>
<input type="number" value="" name="ev_cost" placeholder="Price in €"><br>
<label>Power</label>
<input type="number" value="" name="ev_power" placeholder="Power in Kw"><br>
<br>
<input type="submit" id="update_submit" value="Update details" name="submit_button">
</form>
</div>
The CSS file associated with this code snippet:
#update_submit {
width: auto;
background-color: #4CAF50;
color: white;
padding: 6px 10px;
margin: 4px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#update_submit : hover {
background-color: #ab1313;
}
I am having trouble understanding why the hover effect on the submit button is not visible. Could someone please assist me with this issue?