悬停按钮

Question

我创建了一组用户必须选择的问题。 我不会提供一个大图像，但我想在悬停时显示一个小图像。

示例如何显示（悬停时右侧）

到目前为止，我的代码仅以HTML格式显示：

＆＃13;

＆＃13;

<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>
                          
                          
                          

＆＃13;

＆＃13;

＆＃13;

我不知道如何从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/