Hover over radio button label and display an image-CodePudding

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 >
Name, text and logo
  <span >
    <input  type="radio" name="RoomLevel" id="RoomLevel_1" value="1">
  </span>
  <div >
    <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');
    }
  );
});

CodePudding user response：

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 >Name, text and logo<span >
   <input  type="radio" name="RoomLevel" id="RoomLevel_1" value="1">
   </span><div ><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>

CodePudding user response：

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 >
  Name, text and logo
  <span >
    <input  type="radio" name="RoomLevel" id="RoomLevel_1" value="1">
  </span>
  <div >
    <img src="https://i.stack.imgur.com/lxthA.jpg" height='326px'>
  </div>
</label>

CodePudding user response：

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 >
 Name, text and logo
 <span >
  <input  type="radio" name="RoomLevel" id="RoomLevel_1" value="1">
 </span>
 <div >
  <img src="https://picsum.photos/300/200">
 </div>
</label>