'Hover over radio button label and display an image

I have a number of html radio buttons and what I would like to do is when the radio button label is hovered over display an image. The radio buttons are in groups with each button having a unique id. The code below I think should work but it does not.

Does anyone have a better solution.

HTML CODE

<label class="btn btn-primary form-check-label ">
Name, text and logo
  <span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_1" value="1">
  </span>
  <div class="place-image">
    <img src="../images/Name_logo.png">
  </div>
</label>

CSS

.rhidden {
  display: none;
}

.place-image{
  display:none;
}

div.place-image{
  width:326px;
  height:326px;  
}

JQUERY CODE

$(document).ready(function(){
  $('#RoomLevel_1').hover(
    function() {
      $('.place-image').fadeIn('slow');
    },function() {
      $('.place-image').fadeOut('slow');
    }
  );
});
jquery


Solution 1:[1]

you are hovering on your input not on the label thats why it does not work, you can solve your problem like this if you don't want to select label directly

$(document).ready(function(){
    let label = $('#RoomLevel_1').parent().parent();
    $(label).hover(
      function() {
        $('.place-image').fadeIn('slow');
      },function() {
        $('.place-image').fadeOut('slow');
      }
    );
  });
.rhidden {
  display: none;
}

.place-image{
  display:none;
}

div.place-image{
  width:326px;
  height:326px;  
}
<label class="btn btn-primary form-check-label ">Name, text and logo<span class="rhidden">
   <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_1" value="1">
   </span><div class="place-image"><img src="https://picsum.photos/200/200"></div></label>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Solution 2:[2]

Your code doesn't work because your radio button is inside .rhidden which is hidden, so you can't hover over the radio so the logo is never shown.

when the radio button label is hovered

So you don't want to attach your hover to the radio, you want to attach it to the label and can thus keep the radio itself hidden, likely for aesthetic reasons.

You can do this will CSS, without the need for jquery:

.rhidden {
  display:none;  
}

.place-image {
  height:326px;
}

label.form-check-label .place-image {
  opacity:0;
  transition:0.6s all;
}

label.form-check-label:hover .place-image {
  opacity:1;
}
<label class="btn btn-primary form-check-label ">
  Name, text and logo
  <span class="rhidden">
    <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_1" value="1">
  </span>
  <div class="place-image">
    <img src="https://i.stack.imgur.com/lxthA.jpg" height='326px'>
  </div>
</label>

Solution 3:[3]

This fixed version works:

$("#RoomLevel_1").hover(function(){
  $(".place-image").fadeIn('slow')},function(){$(".place-image").fadeOut('slow')}).hover()
.place-image {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="btn btn-primary form-check-label ">
 Name, text and logo
 <span class="rhidden">
  <input class="form-check-input" type="radio" name="RoomLevel" id="RoomLevel_1" value="1">
 </span>
 <div class="place-image">
  <img src="https://picsum.photos/300/200">
 </div>
</label>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 freedomn-m
Solution 3 Carsten Massmann

Related Questions