Question

如何使用jQuery使div内的图像更改为鼠标上的另一个图像？我有一个div，里面有一个图像，一个标题和一些文本。我想在鼠标悬停时更改图像。

我使用的模板也使用了很多jquery，但文件遍布整个地方。我应该把功能放在哪里？

Here is an Image of the DIV

编辑：这是我到目前为止的代码：

CSS：

#tour {
    overflow:hidden;
    width:100%;
    padding:56px 0 47px
}

#tour #link {
    height:auto;
    width:200px; /* 140px + 60px */
    float:left;
    margin-right:25px;
    margin-left:10px;   

}

#tour #link:hover {
    cursor:pointer;
}

#tour img {
    /* Float the image to the left of text */
    width:50px;
    float: left;
    margin-right:10px;
    height:auto;
}

#tour h1, h2, h3, h4 {
    display:block;
    width:140px;
    float:left;
}

#tour p, #tour p.last {
    display:table-row;
    width:140px;
    alignment-baseline:baseline;
    /* Custom added */
    color: #333;
    font-size: 10px;
    margin: 5px;
    font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
    font-size: 11px;
    width: 140px;   
}

HTML：

<div id="tour"> 
   <div id="link" onclick="location.href='#';"  >               
      <img src="images/icn1.png" alt="" />
      <h2>Pitch</h2>
      <p>Present your ideas in a manner that will leave your customers in amazement.</p>
   </div>
 </div>

Answer 1

$('div#imageContainer').on('mouseover', function(){
    $(this).children('img').attr('src','../newImage.png');
});

那就行了。无论你把代码放在哪里，只要它在$(document).load(function(){...});

之内

注意：这是使用最新的jQuery 1.7.1 .on()函数，这是此版本的新功能。使用.bind()

可以完成同样的事情

评论更新：

如果要将此功能保存在单独的文件中，可以将其包装在函数

中

function imageSwap(){
    $('div#imageContainer').on('mouseover', function(){
        $(this).children('img').attr('src','../newImage.png');
    });
}

然后只需在文档加载中调用imageSwap()函数。

此外，如果要在具有不同图像的多个div上使用此功能，则可以执行以下两种操作之一。 A）将您的图片命名为img1_over.png和img1.png，在这种情况下您可以修改代码：

$('div#imageContainer').on('mouseover', function(){
    var img = $(this).children('img');
    img.attr('src', img.attr('src').replace('.png', '_over.png'));
});

或者您可以将图像路径存储在图像本身的数据属性中。在HTML中，您可以将悬停图像添加到数据属性中，如下所示：

<img src="../cool_img.png" data-hover="../ever_cooler_image.png" />

你的代码看起来像这样：

$('div#imageContainer').on('mouseover', function(){
    var img = $(this).children('img');
    img.attr('src', img.data('hover'));
});

Answer 2

我建议在CSS with a sprite background image中执行此操作，但如果必须在jQuery中执行此操作...

$(function() {
  var div = $("#yourDiv");
  var img = div.find("img:first");
  var orig = img.attr("src");
  div.hover(
    function() {
      img.attr("src", "ImageOver.png");
    },
    function() {
      img.attr("src", orig);
    }
  );
});

Answer 3

如果你是如此倾向，你也可以在没有javascript的情况下通过用锚元素替换你的图像，使用CSS来设置它，就像这样......

a.imageLink {
    background: url('path/to/image.png') no-repeat;
    display: block;
    width: [width-of-image]px;
    height: [height-of-image]px;
    border: 0 !important;
    outline: 0 !important;
}

然后使用:hover伪类替换背景图像：

a.imageLink:hover {
    background-image: url('path/to/hover_image.png');
}

Answer 4

你应该用CSS做到这一点。

#img:hover {background: green;}

如果必须使用jQuery，请使用.hover（）。

$("#img").hover(function (e) {
    $(e.target).css('background', 'purple');
},
function (e) {
    $(e.target).css('background', '');
});

使div内的图像更改为鼠标悬停在另一个图像上

4 个答案: