懸停按鈕時顯示圖像

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/