javascript - 使用 php 和 javascript 动态鼠标悬停图像

Question

图像上的悬停事件应将其显示在固定的 div 上。我怎样才能实现这个目标？

例如:在flipkart中如果有特定的产品并且他们提供该产品的颜色变化，当我们将鼠标悬停在颜色变化上时，我们可以看到该颜色产品。
如果袋子有蓝色选项，我们将鼠标悬停在蓝色框上，然后会出现蓝色袋子图像。

Answer 1

试试这个:

1. 在Javascript中保存img的url
2. 向元素添加 data-color 属性
3. 使用hover事件

$("div.color").hover(function() {
  var color = $(this).attr("data-col");
if (color == "blue"){
  $("#box").html("<img src = 'https://rukminim1.flixcart.com/image/312/312/dress/a/p/h/fk01-1-elevate-women-m-original-imaehfswyyqct7jg.jpeg?q=70'/>");
}
if (color == "red"){
  $("#box").html("<img src = 'https://rukminim1.flixcart.com/image/832/832/sari/p/e/q/1-1-vf-109-varni-retail-free-original-imaem8ypw2dhyekc.jpeg?q=70'/>");
}
if (color == "green"){
  $("#box").html("<img src = 'https://rukminim1.flixcart.com/image/832/832/lehenga-choli/a/p/t/1-1-yue7984-sareeshop-free-original-imae96y2v3wdz5nr.jpeg?q=70'/>");
}
if (color == "yellow"){
  $("#box").html("<img src = 'https://rukminim1.flixcart.com/image/832/832/sari/y/u/d/1-1-enix20-digitalmella-original-imaeaz7cehby8kqz.jpeg?q=70'/>");
}



});

.color {
heigth: 50px;
 width: 50px;
  border: solid 1px black;
  display: inline-block;
}
#box {
height:300px;
  width:300px;
    border: solid 1px black;
 margin-top:20px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class= "color" data-col="blue">blue</div>
<div class= "color" data-col="red">red</div>
<div class= "color" data-col="green">green</div>
<div class= "color" data-col="yellow">yellow</div>

<div id="box"><img src = "https://rukminim1.flixcart.com/image/312/312/dress/a/p/h/fk01-1-elevate-women-m-original-imaehfswyyqct7jg.jpeg?q=70"/></div>