悬停按钮时显示图像

Question

我正在创建用户必须选择的一组问题。 我不会提供较大的图像，而是希望将鼠标悬停时显示较小的图像。

样本显示方式（悬停在右侧）

到目前为止，这只是我的HTML代码：

 <label class="btn buying-selling" style="outline-style: solid; outline-color: #fff6e5;"> <br> <input type="radio" id="flavor1" name="cake_flavor"/> <span class="radio-chosen"></span><span class="buying-selling-word"> Orange </span> <div class="orangefla"> Im trying to display it here </div> <label class="btn buying-selling" style="outline-style: solid; outline-color: #fff6e5;"> <br> <input type="radio" id="flavor2" name="cake_flavor"/> <span class="radio-chosen"></span><span class="buying-selling-word"> Chocolate </span> <label class="btn buying-selling" style="outline-style: solid; outline-color: #fff6e5;"> <br> <input type="radio" id="flavor3" name="cake_flavor"/> <span class="radio-chosen"></span><span class="buying-selling-word"> Caramel </span> </label> 

我不知道如何从悬停的jquery开始。 提前非常感谢您！！

Answer 1

我已添加测试图像

 $(function() { $('span').each(function() { $(this).mouseenter(function() { $('.orangefla').html('<img src=" http://www.learningspy.co.uk/wp-content/uploads/2016/05/Testing_in_Progress.gif" alt="Mountain View" style="width:304px;height:228px;">'); }); $(this).mouseleave(function() { $('.orangefla').html(''); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <label class="btn buying-selling" style="outline-style: solid; outline-color: #fff6e5;"> <br> <input type="radio" id="flavor1" name="cake_flavor"/> <span class="radio-chosen"></span><span class="buying-selling-word"> Orange </span> <div class="orangefla"> Im trying to display it here </div> <label class="btn buying-selling" style="outline-style: solid; outline-color: #fff6e5;"> <br> <input type="radio" id="flavor2" name="cake_flavor"/> <span class="radio-chosen"></span><span class="buying-selling-word"> Chocolate </span> <label class="btn buying-selling" style="outline-style: solid; outline-color: #fff6e5;"> <br> <input type="radio" id="flavor3" name="cake_flavor"/> <span class="radio-chosen"></span><span class="buying-selling-word"> Caramel </span> </label> 

在单击时jQuery代码是：-

$(function() {
    $("#flavor1").click(function() {
     $('.orangefla').html('<img src=" http://www.learningspy.co.uk/wp-content/uploads/2016/05/Testing_in_Progress.gif" alt="Mountain View" style="width:304px;height:228px;">');
    });
    });

Answer 2

通过使用JQuery，您可以使用.hover（）和.toggleClass（）函数，代码：

<script
              src="https://code.jquery.com/jquery-3.1.1.min.js"
              integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
              crossorigin="anonymous"></script>

<script>
  $(".buying-selling-word").hover(function() {
    $('.orangefla').toggleClass('mouseover');
  });
</script>

<style>
  .mouseover {
    width: 150px;
    height: 150px;
    background-image: url('http://placehold.it/150x150');
    border: 0;
  }
</style>

<label class="btn buying-selling" style="outline-style: solid; outline-color: #fff6e5;"> 
<br><input type="radio" id="flavor1" name="cake_flavor"/>
<span class="radio-chosen"></span><span class="buying-selling-word"> Orange </span>
<div class="orangefla"> Im trying to display it here </div>

https://jsfiddle.net/35a4L99j/