My issue is that the span hover effect is not working as expected. I am trying to create a system where when the mouse hovers over File Select1, File Select2, or File Select3, the text turns blue. Here's the HTML code I wrote:
<form action="/accounts/upload_save/" method="POST" enctype="multipart/form-data">
{% csrf_token %}
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary btn-lg file_select">
File Select1
<input type="file" name="image">
</span>
</label>
<input type="text" class="form-control" readonly="">
</div>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary btn-lg file_select">
File Select2
<input type="file" name="image2">
</span>
</label>
<input type="text" class="form-control" readonly="">
</div>
<div class="input-group">
<label class="input-group-btn">
<span class="btn btn-primary btn-lg file_select">
File Select3
<input type="file" name="image3">
</span>
</label>
<input type="text" class="form-control" readonly="">
</div>
<div class="form-group">
<input type="hidden" value="{{ p_id }}" name="p_id" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="SEND" class="form-control">
</div>
</form>
I also included the following CSS code in my stylesheet:
.file_select:hover {
background-color: blue;
}
However, the hover effect is not functioning correctly. I have checked the syntax and it seems correct. Could you please provide guidance on how to rectify this? Is there something wrong with how I'm specifying the background color?