在父 div 元素鼠标悬停时更改图像源

Question

我有一张图片和翻转图片。使用 jQuery 或 CSS，我想在父 div（包含图像）上发生 onmousemove/onmouseout 事件时显示/隐藏翻转图像。

我该怎么做？

编辑：应要求在下面发布的 HTML。与问题无关，但作为仅供参考的 HTML 是建立在 30 列流体网格上的。

悬停在顶部 div (row-fluid) 时，图像 (image.png) 应更改为不同的源图像 (imagehover.png)。

<div class="row-fluid" style="padding-top:1em">
            <div class="span4">
              //Random content
            </div>
            <div class="span8 offset1">
              //Random content
            </div>
            <div class="span9 offset3">
              <ul>
                <li>//Random content</li>
                <li>//Random content</li>
                <li>//Random content</li>
             </ul>
            </div>
            <img src='../../images/image.png>
<div>

Answer 1

回答我自己的问题，因为我使用其他人的 cmets 和答案的元素来创建一个混合体：一个精灵，完全 CSS 解决方案。我认为这是最佳选择。

Per @gilly3 “图像交换最好使用精灵来完成，这样图像之间的切换就不会有任何延迟。将图像的两个版本并排放在一个文件中。将该图像设置为背景一个 div，并调整背景位置以显示一个或另一个图像。”对于这个例子，我将使用 96px（高）x 27px（宽）的精灵，使用我的 em 值。

在 HTML 中将 img 行替换为：

<div class="sprite-image"></div>

CSS：

.sprite-image {
{
background-image: url(../../images/image.png);
height: 3.7em;
width: 27px;
}

.row-fluid:hover .sprite-image
{
background-position: 0px -3.7em;
}

Answer 2

没有任何要测试的 html，这只是我脑海中想到的。不确定它是否会起作用，但我不明白为什么它不会。

$('div').mouseenter(function() {
    var image = $('img', this);

    $(image.attr('src', 'new-image-src.jpg');
}).mouseleave(function () {
    var image = $('img', this);

    $(image).attr('src', 'old-image-src.jpg');
});

Answer 3

你想做这样的事情：full_path_to_css parent:hover child

full_path_to_css parent:hover child {
  styles for your item
}

例如：

html（div.img 可以是任何东西）：

<div class="parent">
  <div class="img">
  </div>
</div>​​​​​​​​​​​​​​​​​​

css:

div.​parent​ {
  width:200px;
  height:200px;
  background-color:red;
}
div.img {
  width:100px;
  height:100px;
  background-color:blue;
}

div.parent:hover div.img {
  background-color:green;
}​

如果你想测试这里检查：http://jsfiddle.net/NicosKaralis/kd6wy/

请记住，div 和 img 类可以是任何元素，不必是 div，您可以根据需要更改 css 样式，唯一需要注意的是parent:hover child

编辑

澄清一件事：:hover 的项目是你想要检测悬停动作的女巫上的父项，child 是你想要更改 css 规则的女巫上的项目

再次编辑

<div id="parent" class="row-fluid" style="padding-top:1em">
        <div class="span4">
          //Random content
        </div>
        <div class="span8 offset1">
          //Random content
        </div>
        <div class="span9 offset3">
          <ul>
            <li>//Random content</li>
            <li>//Random content</li>
            <li>//Random content</li>
         </ul>
        </div>
        <img class="child" src='../../images/image.png>
<div>

在您需要的代码上：

div#parent.row-fluid img.child {
  display:none;
}
div#parent.row-fluid:hover img.child {
  display:block;
}

这将使您的图像仅在鼠标悬停在您的 div 上时才会显示

Answer 4

应该就像将 mouseover 和 mouseout 事件处理程序附加到父 div 然后操作包含的 img 元素一样简单。

var rolloverImage = ...
var origImage = ...
$("#parentDivId")
       .mouseover(function() {
          $("#parentDivId img").attr("src", rolloverImage)
       })
       .mouseout(function() {
          $("#parentDivId img").attr("src", origImage)
       })

Answer 5

您可以使用此代码“显示/隐藏翻转图像”

#parentDiv > img {
  display: none;
}
#parentDiv:hover > img {
  display: block;
}

> 允许您选择img 标记，它们是#parentDiv 的直接后代（我给了外部 div 的 ID）。然后我们只是在常规和悬停状态下为其设置不同的样式。

Answer 6

试试：

$('div.row-fluid').hover(function() {
    $(this).find('img').attr('src', 'http://dummyimage.com/100x100/000/fff');
}, function() {
    $(this).find('img').attr('src', 'http://www.placekitten.com/100/100');
});​

jsFiddle example