jQuery functions conflict

Question

Task:

• If the radio button is selected - show the hidden image and text, do not hide until you switch to another radio button.
• Hover to the text of the radio button - show only the picture and hide after mouse leave

With my code, only the second function of the hover works. When you hover the radio button, the picture appears, but when you select it, it just disappears.

Separate functions work fine.

How can I fix it?

$(document).ready(function() {

    $('.img2, .img3, .img4, .img5, .img6, .img7').hide();
    $('#pic1').css('opacity', '1');
    $('.text').hide();


    $('input[type="radio"]').click(function() {
        if ($(this).attr('id') == 'item1') {
            $('#pic5, #text1').show();
        }

        else {
            $('#pic5, #text1').hide();
        }

        if ($(this).attr('id') == 'item2') {
            $('#pic3, #text2').show();
            $('#pic1').css('opacity', '0.4');
        }
        else {
            $('#pic3, #text2').hide();
        }

        if ($(this).attr('id') == 'item3') {
            $('#pic7, #text3').show();
            $('#pic7').css('opacity', '0.4');
        }
        else {
            $('#pic7, #text3').hide();
        }

        if ($(this).attr('id') == 'item4') {
            $('#pic4, #text4').show();
            $('#pic1').css('opacity', '0.4');
        }
        else {
            $('#pic4, #text4').hide();
        }

        if ($(this).attr('id') == 'item5') {
            $('#pic5, #text5').show();
            $('#pic1').css('opacity', '0.4');
        }
        else {
            $('#text5').hide();
        }

        if ($(this).attr('id') == 'item6') {
            $('#pic6, #text6').show();
            $('#pic1').css('opacity', '0.4');
        }
        else {
            $('#text6').hide();
        }

        if ($(this).attr('id') == 'item7') {
            $('#pic7, #text7').show();
            $('#pic1').css('opacity', '0.4');
        }
        else {
            $('#text7').hide();
        }

    });

    $("#desc1").mouseenter(function() {
        $('#pic5').show();
    });
    $("#desc1").mouseleave(function() {
        $('#pic5').hide();
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<div class="container">
  <div class="image-wrap">
    <div class="image">
      <div class="img1" id="pic1"><img src="img/main_v3-38.png" alt=""></div>
      <div class="img2" id="pic2"><img src="img/main_v3-41.png" alt=""></div>
      <div class="img3" id="pic3"><img src="img/main_v3-44.png" alt=""></div>
      <div class="img4" id="pic4"><img src="img/main_v3-47.png" alt=""></div>
      <div class="img5" id="pic5"><img src="img/main_v3-50.png" alt=""></div>
      <div class="img6" id="pic6"><img src="img/main_v3-53.png" alt=""></div>
      <div class="img7" id="pic7"><img src="img/main_v3-56.png" alt=""></div>
    </div>
  </div>
  <div class="radio">
    <form class="radiobuttons">
      <p id="desc1"><input type="radio" name="item1" id="item1" value="1">Варианты монтажа</p>
      <p id="desc2"><input type="radio" name="item1" id="item2" value="1">Роллетные профили</p>
      <p id="desc3"><input type="radio" name="item1" id="item3" value="1">Концевой профиль</p>
      <p id="desc4"><input type="radio" name="item1" id="item4" value="1">Направляющие шины</p>
      <p id="desc5"><input type="radio" name="item1" id="item5" value="1">Защитный короб</p>
      <p id="desc6"><input type="radio" name="item1" id="item6" value="1">Боковые крышки, консоль</p>
      <p id="desc7"><input type="radio" name="item1" id="item7" value="1">Октогональный вал</p>
      <p id="desc7"><input type="radio" name="item1" id="item7" value="1">Концевой захват</p>
      <p id="desc7"><input type="radio" name="item1" id="item7" value="1">Система управления</p>
    </form>
  </div>
</div>
<div class="text" id="text1">Lorem Ipsum Text1</div>
<div class="text" id="text2">Lorem Ipsum Text2</div>
<div class="text" id="text3">Lorem Ipsum Text3</div>
<div class="text" id="text4">Lorem Ipsum Text4</div>
<div class="text" id="text5">Lorem Ipsum Text5</div>
<div class="text" id="text6">Lorem Ipsum Text6</div>

Answer 1

You are correct, there is a conflict here, but it is working as it should based on what you have.

$("#desc1").mouseleave(function() {
    $('#pic5').hide();
});

It doesn't matter if you have clicked this button or not, when the mouse moves away it will hide the picture. Try this

$("#desc1").mouseleave(function() {
    if($('#item1').prop('checked') === false) {
        $('#pic5').hide();
    }
});