Question

图像上的悬停事件应该在固定的div上显示。我怎样才能做到这一点？

例如：在flipkart中，如果有特定产品并且它们为该产品提供颜色变化，当我们将颜色变化悬停时，我们可以看到该颜色产品。
如果它们是蓝色选项可用于包，我们将鼠标悬停在蓝色框上，然后出现蓝色包图像。

Answer 1

试试这个：

在Javascript中保存img的网址
为元素添加data-color属性
使用hover活动

＆＃13;

$("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'/>");
}



});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

BASIC CSS

.clearfix:after {
  content: ".";
  display: block;
  width: 100%;
  height: 0px;
  visibility: hidden;
  clear: both;
}

#prod-image-container {
  border: 1px solid #CCC;
  width: 600px;
  height: 400px;
}

#prod-images {
  list-style: none;
  margin: 0;
  padding: 0;
}

#prod-images li {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid #CCC;
  margin: 0 4px 4px 0;
}

<强> HTML

<ul id="prod-images" class="clearfix">
  <li class="prod-color" data-big-image="https://dummyimage.com/600x400/CC0000/fff.png" data-color="#CC0000" /></li>
  <li class="prod-color" data-big-image="https://dummyimage.com/600x400/CCC/fff.png"  data-color="#CCCCCC"/></li>
  <li class="prod-color" data-big-image="https://dummyimage.com/600x400/FFF000/fff.png"  data-color="#FFF000"/></li>
</ul>
<div id="prod-image-container">
  <img src="https://dummyimage.com/600x400/CC0000/fff.png" />
</div>

使用jQuery

<script>
$(function() {
  $("#prod-images .prod-color").each(function( index ) {
    var color_palette = $(this).attr("data-color");
    $(this).css("background-color", color_palette)
  });
  $("#prod-images .prod-color").hover(function() {
    var prod_image = $(this).attr("data-big-image");
    $("#prod-image-container img").attr("src", prod_image);
  });
});
</script>

快速小提琴：https://jsfiddle.net/adrianopolis/ast16g7t/

动态鼠标悬停图像使用PHP和JavaScript

2 个答案: