Question

我有一个父div #crbigimg，其中有一个图片#copyrightimagecurrent。

除此之外，父div中还有四个较小的div，每个div在#copyrightimagecurrent图像上都有不同的大小和位置。

结构如下：

<div id="crbigimg">
    <img id="copyrightimagecurrent" src="http://bonfiredog.co.uk/ooo/icons/copyrightbase.png" alt="Copyright" />
        <div id="copyright1"></div>
        <div id="copyright2"></div>
        <div id="copyright3"></div>
        <div id="copyright4"></div>
</div>

我想要做的是，当鼠标悬停在每个#copyright子div上时，更改#copyrightimagecurrent图像的src以显示不同的图像，以及从鼠标移除鼠标时悬停位置，将其返回到原始src。

我认为要做到这一点，我需要在更改HTML本身之前调用子div上的.hover jQuery函数。然而，第二部分目前不在我的能力之内。

如果有人可以帮助我，我将不胜感激。

有关相关网页的实时版本，请参阅：http://bonfiredog.co.uk/copyright

对于原始代码本身：

HTML

<html>
<body>
    <div id="crbigimg">
    <img id="copyrightimagecurrent" src="http://bonfiredog.co.uk/ooo/icons/copyrightbase.png" alt="Copyright" />
        <div id="copyright1"></div>
        <div id="copyright2"></div>
        <div id="copyright3"></div>
        <div id="copyright4"></div>
    </div>
</body>
<html>

CSS

#crbigimg{
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:25%;
text-align:center;
}

#crbigimg img{
display:block;
margin-left:auto;
margin-right:auto;
width:100%;
height:auto;
}


#copyright1{
border: 2px solid green;
width:3%;
height:6%;
position:absolute;
top:21%;
left:50%;
z-index:5;
}

#copyright2{
border: 2px solid red;
width: 6.5%;
height: 15.4%;
position: absolute;
top: 20%;
left: 45.3%;
z-index: 2;
}

#copyright3{
   border: 2px solid purple;
  width: 5.4%;
  height: 8%;
  position: absolute;
  top: 11.5%;
  left: 45.4%;
  z-index: 3;
}

#copyright4{
  border: 2px solid blue;
  width: 4.1%;
  height: 6.6%;
  position: absolute;
  top: 11.6%;
  left: 49.6%;
  z-index: 4;
}

还没有Javascript / jQuery！

Answer 1

在每个'#copyright'元素上添加新的src：

<div id="copyright1" data-src="path/to/img.png"></div>
....

在mouseenter上，将此data-src路径应用于img：

$('#crbigimg > div').on('mouseenter', function() {
    var newSrc = $(this).attr('data-src');
    var img = $('#copyrightimagecurrent');
    img.attr('data-orSrc', img.attr('src'));
    img.attr('src',newSrc);
}).on('mouseleave', function() {
    var img = $('#copyrightimagecurrent');
    img.attr('src',img.attr('data-orSrc'));
});

Answer 2

＆＃13;

var img = $('#copyrightimagecurrent');
var originalSrc = img.attr('src');

$('#crbigimg > div').on({
    mouseenter: function () {
        img.attr('src',$(this).data('src'));
    },

    mouseleave: function () {
        img.attr('src',originalSrc);
    }
});

＆＃13;

#crbigimg{
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:25%;
text-align:center;
}

#crbigimg img{
display:block;
margin-left:auto;
margin-right:auto;
width:100%;
height:auto;
}

#copyright1{
border: 2px solid green;
width:3%;
height:6%;
position:absolute;
top:21%;
left:50%;
z-index:5;
}

#copyright2{
border: 2px solid red;
width: 6.5%;
height: 15.4%;
position: absolute;
top: 20%;
left: 45.3%;
z-index: 2;
}

#copyright3{
   border: 2px solid purple;
  width: 5.4%;
  height: 8%;
  position: absolute;
  top: 11.5%;
  left: 45.4%;
  z-index: 3;
}

#copyright4{
  border: 2px solid blue;
  width: 4.1%;
  height: 6.6%;
  position: absolute;
  top: 11.6%;
  left: 49.6%;
  z-index: 4;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="crbigimg">
    <img id="copyrightimagecurrent" src="http://bonfiredog.co.uk/ooo/icons/copyrightbase.png" alt="Copyright">
    <div id="copyright1" data-src="http://newlaunches.com/wp-content/uploads/2013/07/google-glass-dog-590x393.jpg"></div>
    <div id="copyright2" data-src="http://googleblog.blogspot.co.uk/uploaded_images/NICKEY_credit-708823.jpg"></div>
    <div id="copyright3" data-src="http://www.glassappsource.com/wp-content/uploads/2014/02/googleglassdog.jpg"></div>
    <div id="copyright4" data-src="http://www.livewithg.com/wp-content/uploads/2013/05/dog-google-glass.jpg"></div>
</div>

＆＃13;

Answer 3

将所有图像src保存在一个json abject或数组中，并使用如下所示

var copywrightImg = {
    "copyright1": "img1path",
    "copyright2": "img2path",
    "copyright3": "img3path",
    "copyright4": "img4path"
}
$("#crbigimg div").hover(function () {

    if (Object.keys(copywrightImg).indexOf(this.id) != -1) {
        $("#copyrightimagecurrent").attr("src", copywrightImg[this.id])
    }
}, function () {
    $("#copyrightimagecurrent").attr("src", "http://bonfiredog.co.uk/ooo/icons/copyrightbase.png")
});

Answer 4

我在这里为你做了一个小例子https://fiddle.jshell.net/5913ba1q/

这是您在悬停时更改图像所需的js

var currentImage = $('#copyrightimagecurrent').attr('src'),
    mainImage = $('.main-image img');

function changeImage(){

$('.copyright').hover(function(){

    var el =  $(this);
    imgUrl = el.data('image');
    mainImage.attr('src',imgUrl)

}, function(){

    mainImage.attr('src',currentImage)

});
}

changeImage();

我改变了你的html，这里是：

<div id="crbigimg">
     <div class="main-image">
         <img id="copyrightimagecurrent" src="http://lorempixel.com/400/400/" alt="Copyright" />
     </div>   
    <div class="copyright-wrapper">
      <div class="copyright" data-image="http://lorempixel.com/410/330/"></div>
      <div class="copyright" data-image="http://lorempixel.com/350/320/"></div>
      <div class="copyright" data-image="http://lorempixel.com/350/300/"></div>
      <div class="copyright" data-image="http://lorempixel.com/300/300/"></div>
   </div>
</div>

Answer 5

您可以调用.mouseover（）和.mouseout（）函数来执行此操作，如下所示：

jQuery(document).ready( function () {
//Set your images (I've set two here for clarity)
    var rollover_image =  "/images/image1.jpg";
    var normal_image =  "/images/image2.jpg";

    //Roll the image
    jQuery("#copyright1")
        .mouseenter(function() {
            jQuery("#copyrightimagecurrent").attr("src", rollover_image);
        })
        .mouseout(function() {
            jQuery("#copyrightimagecurrent").attr("src", normal_image);
        });
});

Answer 6

我认为在你做出改变之前存储你的src。

示例代码：

//First Get the Current src and Store it to Variable
var initialImgSrc = $('#copyrightimagecurrent').attr('src');

$('#copyrightimagecurrent').hover(              
    function () {
          //Change img src when hover over
         $('#copywriteimgecurrent').attr('src','picture-1.png');
    }, 

    function () {
        //When hover out get back to initial image
        $('#copywriteimgecurrent').attr('src',initialImgSrc);
    }
);

Answer 7

<div id="crbigimg">
<img id="copyrightimagecurrent"  src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/128/single-bird-icon.png" old-src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/128/single-bird-icon.png" alt="Copyright" />

    <div id="copyright1" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">one</div>
    <div id="copyright2" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">two</div>
    <div id="copyright3" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">three</div>
    <div id="copyright4" class='cps' data-src="http://icons.iconarchive.com/icons/fasticon/halloween-emoticons/128/Halloween-sad-icon.png">four</div>

$('.cps').hover(function() {
  var that = $(this);
    var newSrc = that.attr('data-src');
    var img = $('#copyrightimagecurrent');    
    img.attr('src',newSrc);
},function() {
  var that = $(this);
    var img = $('#copyrightimagecurrent');
    img.attr('src',img.attr('old-src'));
});

Js Fiddle Demo

将鼠标悬停在另一个<div>

7 个答案: